CSS3 poszter tipográfia

Sokáig tépelődtem, hogy belefogjak-e, ebbe a poszteres cikkbe. Mert az előző CSS3 @font-face-el foglalkozó után záporoztak a levelek. Egy részében dicsérték az ötletet, hogy foglalkozzunk többet a tipográfiával, egy részében meg ijedten kérdezték, hogy ugye nem fogjuk agyon zsúfolni különböző betűtípusokkal az odalakat amiket készítünk. Azt gondolom a második reakció is teljes mértékben jogos. Hiszen, plusz terhelés a webszervernek, plusz sávszélesség annak aki meg akarja nézni és ráadásul valóban rettenetesen meg lehet csúfítani vele az oldalunkat.

Ami miatt szerintem mégis érdemes ezen gondolkodni, az az, hogy az ésszerű használat és a táblagépek egyre nagyobb elterjedése okán (nézd meg az előző cikk példáját egy táblagépen, szerintem korrekt, jobban mutat mint monitoron), a tipográfia felértékelődése várható. Persze, addig még sok víz lefolyik a Dunán, de ettől a téma nyitott, érdekes és talán megtérül az idő amit rászánunk.

Ebben a cikkben egy egyszerű posztert fogunk elkészíteni, ami akár lehetne egy felhívás, vagy akár egy komplett hirdetés. De ne szaladjunk előre. Egy barátom kérte a héten a segítségem, hogy a cégük hirdetésére szolgáló webes posztert nézzem át és véleményezzem, esetleg dolgozzam át. Ekkor gyúlt a fény és kezdtem vizsgálni a lehetőségét, hogy a CSS3 és a @font-face kombinálásával milyen posztereket lehet készíteni. Ennek az eredményét fogjátok olvasni, sok hozzáfűznivalót, újdonságot az előző cikkek után már nem fogtok tapasztalni, de ettől eltekintve, szerintem érdekes opció. Itt jegyezném meg, hogy @font-face nélkül is lehet ilyet csinálni, mielőtt rám sütitek, hogy: de hiszen ez már a CSS3 elődjeiben is megvolt.

poszter tipográfia

CSS3 poszter

A HTML5 része valótlanul egyszerű, hiszen a javát a CSS3 fogja végezni. A HTML5 a következő:


<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 @font-face poster</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="css3, typographic" />
<meta name="copyright" content="html5.ugyesen.com" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="typo.css" />
</head>
<body>
<section>
<p>
<span class="block1">CSS3</span><span class="block2">Typographic</span><span class="block3">tutorial</span><span class="block4">poster</span><span><span class="block5">Without</span></span><span class="block6">Flash or PS.</span> <span class="block7">html5.ugyesen.com</span>
</p>
</section>
</body>
</html>

Nézzük mit használtunk a CSS3 forrásban, egy két példát emelnék ki a teljes kódból, hiszen többségében akik olvassátok, egészen biztos vagyok benne, hogy tudjátok a CSS3 dörgést, mert ugye mind olvastátok az előző postokat 🙂

  • @font-face, hogy legyen egyedi betűtípusunk
  • font deklarációk
  • -webkit-transform forgatások
  • opacity és z-index
  • text-shadow és box-shadow árnyékolások
  • és persze egy nagy adag pozicionálás.

De akkor lássuk is mi van a typo.css fájlomban.

@font-face {
font-family: 'AlfaSlabOneRegular';
src: url('AlfaSlabOne-Regular-OTF-webfont.eot');
src: local('AlfaSlabOne-Regular'),local('AlfaSlabOne-Regular'),
url('AlfaSlabOne-Regular-OTF-webfont.woff') format('woff'),
url('AlfaSlabOne-Regular-OTF-webfont.ttf') format('truetype'),
url('AlfaSlabOne-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
url('AlfaSlabOne-Regular-OTF-webfont.svg#AlfaSlabOneRegular') format('svg');
}

body {
background: url(bg.jpg) no-repeat;
padding-top: 45px;
font: 10px/1 AlfaSlabOneRegular;
color: #f2efef;
}

section {
display: block;
position: relative;
width: 650px;
margin: 0 auto;
-webkit-transform: rotate(1deg);/*forgatás*/
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
}

section:after { /*transzparens × jel megjelenitese, nagyitasa, atlatszosag*/
position: absolute;
left: -180px;
top: -160px;
content: "×";
font-size: 620px;
opacity: 0.3;
}

section p {
text-transform: uppercase; /*betük atalakitasa, arnyekolas*/
text-shadow: 1px 7px #bababa, -1px -1px #fff;
}

span {
display: block;
}

.block1 { /*a blokkhoz tartozo definicio*/
font-size: 225px;
}

.block2 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas*/
position: absolute;
left: 0;
top: 205px;
padding: 1px 0;
font-size: 60px;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
}

.block3 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas,betutipus,betukoz*/
position: absolute;
z-index: 99;
left: -21px;
top: 350px;
font-size: 18px;
font-family: sans-serif;
color: #808080;
letter-spacing: 2px;
text-shadow: 0 0px; /*arnyekolast leszedjuk*/
-webkit-transform: rotate(-91deg); /*meroleges miatt*/
-moz-transform: rotate(-91deg);
-o-transform: rotate(-91deg);
-ms-transform: rotate(-91deg);
}

.block4 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas*/
position: absolute;
top: 260px;
left: -10px;
font-size: 195px;
-webkit-transform: rotate(-1deg);
-moz-transform:  rotate(-1deg);
-o-transform:  rotate(-1deg);
-ms-transform: rotate(-1deg);
}

.block5 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas*/
position: absolute;
top: 440px;
left: 350px;
font-size: 80px;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
}

.block6 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas*/
position: absolute;
top: 525px;
font-size: 60px;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
}
.block7 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas*/
position: absolute;
top: 600px;
left: 240px;
padding: 6px 10px;
background: #f2efef;
font-size: 34px;
font-weight: normal;
color: #808080;
text-shadow: 0 0px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
box-shadow: 2px 6px #bababa; /*doboz arnyeka*/
-webkit-box-shadow: 4px 6px #bababa;
-moz-box-shadow: 2px 6px #bababa;
-ms-box-shadow: 2px 6px #bababa;
}

Hát igen, elég macerás a szavankénti igazítás és finomhangolás, de úgy gondolom megéri a vesződést. A CSS3 példát és a kész forrást itt tudjátok megtekinteni.

Persze itt még lehet picit finomítani, hogy esetleg valami esemény hatására legyen teljes a kép. Lássuk, hogy egy pici átalakítás segítségével hogyan is fog ez kinézni. Egészítsük ki a section részünket a következővel:

opacity: .6;
-webkit-transition: opacity 0.6s linear;
-moz-transition: opacity 0.6s linear;
-o-transition: opacity 0.6s linear;

Majd készítsünk egy section:hover -t. És máris kész vagyunk.

section:hover {
-webkit-transition: opacity 0.6s linear;
-moz-transition: opacity 0.6s linear;
-o-transition: opacity 0.6s linear;
-ms-transition: width 1s, height 1s, -ms-transform 1s;
opacity: 1;
}

Az átlátszó CSS3 @font-face poszterünket itt meg tudjátok nézni. (IE alatt ismét előjön az időbuborék, amiért még mindig jár a csoki, de a többi általam tesztelt böngészőben szép.)

A következő példában még egy picit megvariálom, de már nem nagyon. Igazából egy új kinézetet adunk neki. Fekete-fehér lesz.

poszter b&w

CSS3 poszter b&w

A HTML5 kódomban csak annyi változott, hogy másik CSS3 fájlra hivatkozok, de ti akár használhatjátok ugyanazt. A CSS3 fájlban pedig egy új hátteret tettem be bg3.jpg néven, valamint egy picit változtattam a színezeten. Lássuk a CSS3 kódunkat:

@font-face {
	font-family: 'AlfaSlabOneRegular';
	src: url('AlfaSlabOne-Regular-OTF-webfont.eot');
	src: local('AlfaSlabOne-Regular'),local('AlfaSlabOne-Regular'),
	    url('AlfaSlabOne-Regular-OTF-webfont.woff') format('woff'),
	    url('AlfaSlabOne-Regular-OTF-webfont.ttf') format('truetype'),
	    url('AlfaSlabOne-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
	    url('AlfaSlabOne-Regular-OTF-webfont.svg#AlfaSlabOneRegular') format('svg');
}

body {
    background: url(bg3.jpg) no-repeat;
    background-position:center bottom;
    padding-top: 45px;
    font: 10px/1 AlfaSlabOneRegular;
}

section {
    display: block;
    position: relative;
    width: 650px;
    margin: 0 auto;
    -webkit-transform: rotate(1deg);/*forgatás*/
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
}

section:after { /*transzparens × jel megjelenitese, nagyitasa, atlatszosag*/
    position: absolute;
    left: -180px;
    top: -160px;
    content: "×";
    color: #f2efef;
    font-size: 620px;
    opacity: 0.3;
}

section p {
    text-transform: uppercase; /*betük atalakitasa, arnyekolas*/
    text-shadow: 1px 7px #bababa, -1px -1px #fff;
}

span {
    display: block;
}

.block1 { /*a blokkhoz tartozo definicio*/
    font-size: 225px;
    color: #f2efef;
}

.block2 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas*/
    position: absolute;
    left: 0;
    top: 205px;
    padding: 1px 0;
	font-size: 60px;
    color: #f2efef;
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
}

.block3 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas,betutipus,betukoz*/
    position: absolute;
    z-index: 99;
    left: -21px;
    top: 350px;
    font-size: 18px;
    font-family: sans-serif;
    color: #f2efef;
    letter-spacing: 2px;
    text-shadow: 0 0px; /*arnyekolast leszedjuk*/
    -webkit-transform: rotate(-91deg); /*meroleges miatt*/
    -moz-transform: rotate(-91deg);
    -o-transform: rotate(-91deg);
    -ms-transform: rotate(-91deg);
}

.block4 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas*/
    position: absolute;
    top: 260px;
    left: -10px;
    font-size: 195px;
    font-color: #555050;
    -webkit-transform: rotate(-1deg);
    -moz-transform:  rotate(-1deg);
    -o-transform:  rotate(-1deg);
    -ms-transform: rotate(-1deg);
}

.block5 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas*/
    position: absolute;
    top: 440px;
    left: 350px;
    font-size: 80px;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
}

.block6 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas*/
    position: absolute;
    top: 525px;
    font-size: 60px;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
}

.block7 { /*a blokkhoz tartozo definicio, elhelyezkedes es forgatas*/
    position: absolute;
    top: 600px;
    left: 240px;
    padding: 6px 10px;
    background: #f2efef;
    font-size: 34px;
    font-weight: normal;
    color: #808080;
    text-shadow: 0 0px;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    box-shadow: 2px 6px #bababa; /*doboz arnyeka*/
    -webkit-box-shadow: 4px 6px #bababa;
    -moz-box-shadow: 2px 6px #bababa;
    -ms-box-shadow: 2px 6px #bababa;
}

A CSS3 tipográfia demo itt megtekinthető.

Creative Commons Licenc
CSS3 poszter tipográfia  a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...