Mérei Tamás webdesigner

Responsive progress bar

Szerző:   |   2015-04-05

Ezt a kódrészt mostanában készítettem és gondoltam megosztom veletek, hátha valakinek hasznára lesz egyszer.

A működő kódot ide kattintva tudod megnézni.

Videó

HTML forráskód


<div class="wrapper">

	<h1>.: progress bar :.</h1>

	<ul class="progress-bar weeks">
		<li><div>1. hét</div></li>
		<li><div>2. hét</div></li>
		<li class="active"><div>3. hét</div></li>
		<li><div>4. hét</div></li>
	</ul>
	
	<ul class="progress-bar lessons">
		<li><div>1.</div><span>lecke</span></li>
		<li><div>2.</div><span>lecke</span></li>
		<li><div>3.</div><span>lecke</span></li>
		<li class="active"><div>4.</div><span>lecke</span></li>
		<li><div>5.</div><span>lecke</span></li>
		<li><div>6.</div><span>lecke</span></li>
		<li><div>7.</div><span>lecke</span></li>
	</ul>

</div>

CSS forráskód


* { padding:0; margin:0; border:0 }
body { background:#272d34; font-family: 'Ubuntu'; font-size: 11px; }
h1 { font-size: 40px; color: #fff; text-align: center; margin: 0 0 60px 0 }
.wrapper { width: 90%; max-width: 800px; margin: 40px auto }


.progress-bar li {
	list-style: none;
	float: left;
	text-align: center;
	position: relative;
	height: 50px
}
.progress-bar li:before {
	content: "";
	z-index: -1;
	position: absolute;
	left: 0;
	top: 20%;
	background: #ffcc00;
	width: 100%;
	height: 8px;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.4), 1px 1px 1px rgba(0,0,0,0.7)
}
.progress-bar li:first-child:before { border-radius: 5px 0 0 5px }
.progress-bar li:last-child:before { border-radius: 0 5px 5px 0 }

.progress-bar li div {
	background: #ffcc00;
	font-size: 14px;
	font-weight: bold;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	margin: 0 auto 5px auto;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2), 1px 1px 1px rgba(0,0,0,0.4)
}
.progress-bar li span {
	display: block;
	color: rgba(255,255,255,0.4)
}
.progress-bar li.active div {
	background: linear-gradient(#b00000 0%,#830303 100%);
	color: #fff
}

.progress-bar.weeks li { width: 25% }
.progress-bar.weeks li div { width: 55px }
.progress-bar.lessons li { width: 14.28% }


@media only screen and (max-width:480px) {
	.progress-bar li div {
		width: 20px;
		height: 20px;
		line-height: 20px;
		border-radius: 10px;
		font-size: 12px
	}
	.progress-bar li:before {
		height: 4px;
		top: 15%
	}
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

14 hozzászólás

  1. dawnie
    2016. december 17. szombat - 17:39

    Kedves Tamás,
    csak szeretném megköszönni a munkádat, nagyon hasznosak a videóid!
    Szívesen látnék újakat is. 🙂
    Minden jót.

  2. Bunny
    2015. szeptember 4. péntek - 09:19

    Jó, érthető tutorial, egyszerű de látványos példa sok trükkel, világos beszéd, nagy gratula hozzá.

  3. Robin
    2015. július 9. csütörtök - 15:17

    Szia Cyrex!
    Nem ehhez a témakörhöz tartozik,de a segítségedet kérném,még pedig a Gimp nevezetű program kezeléséről.
    Tudnál-e csinálni egy rövidke kis bemutató videót,tutorialt (persze ha használtad és ismered a programot), vagy hogyan tudnám megtanulni a kezelését könnyen?
    Válaszodat előre is köszönöm ! 🙂

  4. Dante
    2015. május 9. szombat - 09:57

    Szia Cyrex! Nem ide tartozik, csak azért írok ehhez a videóhoz, hogy ne járjak úgy, mint egyszer, amikor írtm egy kommentet, és nem tudtam utólag, melyik videóhoz. Azt szeretném kérdezni, hogy szerinted a (web)design-t meg lehet tanulni? Persze azt tudom, hogy megtanulható a CSS meg JQuery, de maga az, hogy legyen elképzelésem, hogy mi hogyan nézzen ki, ki tudjak találni design-okat oldalakhoz, az megtanulható? A napokban volt egy projekt bemutatásom, amit html+php kombóval csináltunk, és én csináltam a design-t (gyakorlatilag fehér háttér, menü alatt egy vonal az elválasztásért, és fekete betűk, kész). A form-okhoz csináltam egy ‘design’-t: szürkés keret, boxshadow, de az is nagyjából semmi. És a tanár rá is kérdezett belépés után, hogy ‘Most beléptünk?’. Mert a design ugyanaz volt, csak a menüsor változott meg ugye a belépés hatására. Gyakorlatilag teljesen nullán van a design skillem. Szerintem az összes videódat megnéztem, főleg a html+css témájúakat (és nagyrészt ezért is kezdett el érdekelni ez a téma), és jól kinéző oldalakat csinálsz, de azokat lemásolni nem akarom, viszont hasonlóakat nem tudok csinálni. Azt nem tartom saját kreálmánynak, ha a tiédet lemásolom, és átírok benne pár színt.
    Köszi szépen a segítséget, és hogy elolvasod, kicsit hosszú lett. 🙂

    • cyrex
      2015. május 9. szombat - 11:36

      Gyakorolni kell sokat, nézegetni más oldalakat, inspirálódni innen-onnan, pl. cssmania, webdesignerdepot, pinterest, meg még csomó jó forrás van.

  5. tapaidavid14
    2015. április 13. hétfő - 19:20

    Szia Cyrex!
    A segítségedet szeretném kérni! Szeretnék egy olyan weboldalt ami abból áll, hogy van egy szövegdoboz amibe egy jelszót kellene beleírni és csak akkor enged tovább ha a jelszó stimmel! Ez ügye arra lenne jó, hogy egy privát oldalam lehetne! Mivel a php-hoz nem értek csak körülírni tudom az elképzelésemnek az algoritmusát:

    Ha a szövegdoboz.szövege = (“jelszóstring”) akkor nyísa meg ezt az oldalt … elentétben írja ki alert.(Hibás jelszó)

    • cyrex
      2015. április 14. kedd - 12:10

      Gugliba beírod, hogy “password protected page” és kiválasztod az ezer találat közül amelyik tetszik. Egyébként a WP is tud ilyen funkciót alapból.

    • tapaidavid14
      2015. április 14. kedd - 17:45

      Hát igen! Nekem is wp a tartalomkezelőm de leheletem sincs hozzá! Hol lehetne ezt beállítani? 😀

    • cyrex
      2015. május 9. szombat - 11:28

      Oldal vagy bejegyzés szerkesztésen belül a közzététéel panelen van olyan, hogy nyilvánosság, és azon belül lehet jelszóval védetté tenni az adott oldalt vagy posztot.

  6. one
    2015. április 6. hétfő - 16:56

    Szia Cyrex!
    Nagyon jó a videó, viszont a GSAP animáció tutorial óta berezeg a hang, recseg. Viszont, ha egy régebbit megnézek az nem rezeg. Valamit állítottál?

    • cyrex
      2015. április 6. hétfő - 20:31

      Többféle mikrofont használok, illetve most nincs rendes hangkártyám, csak az alaplapi szar. Szoktam utólagos zajszűrést is nyomni a hangra, de most kimaradt. Annyira azért nem vészes szerintem.

    • Adam
      2015. április 8. szerda - 15:19

      Kedves Cyrex!
      Legjobb szerintem az USB-s Ez ugyanis semmilyen felesleges zajt továbbítani a felvételre (én laptopnál próbáltam) Tiszta, telt életszerű hangot kaptam.

Hozzászólás

Legújabb hozzászólások