http___www.ucionica.net_trikovi_horizontalno-centriranje-elemenata-css-om-1308__1.xml
1.1 2.1 3.1 3.2 3.3 3.4 4.1 4.2 5.1 6.1 7.1 7.2 14.1 15.1 16.1 17.1 18.1 20.1 21.1 22.1 24.1 25.1 26.1 30.1 31.1 33.1 34.1 35.1 39.1 40.1 42.1 43.1 44.1 46.1 48.1 49.1 51.1 51.2 52.1 53.1 53.2 53.3 53.4 53.5 53.6 57.1 58.1 59.1 60.1 62.1 63.1 63.2 63.3 63.4 63.5 64.1 64.2 64.3 72.1 73.1 74.1 75.1 76.1 78.1 79.1 80.1 82.1 83.1 84.1 85.1 89.1 90.1 92.1 93.1 95.1 96.1 98.1 99.1 100.1 104.1 105.1 107.1 108.1 109.1 111.1 113.1 114.1 116.1 116.2 116.3 116.4 117.1 118.1 119.1 120.1 120.2
Website images video effect with CSS by Matthew James Taylor on 15 July 2009 I regularly listen to last.fm, it's an amazing internet radio station but they also have a good website. One thing I find really interesting is their flash audio player. While it's playing music it cycles through images of the artist. Not only that, but it adds a filter to the images so they look like an old fuzzy, pixelated CRT video screen - here's an example: This effect is achieved by adding partially transparent layers above the image in flash, but we can achieve the same style with basic HTML and CSS. Here's one I prepared earlier: And here is the same image without the video filter for comparison: How to add the video filter It's really easy, all you need to do is wrap your image in a div and include three spans after the image. Here is what the HTML looks like: (Note I've given the div a class of 'crt' - cathode-ray tube) The CSS is a little more complicated but you can download my video image CSS to save some time. .crt { float:left; position:relative; overflow:hidden; .crt img { display:block; float:left; .crt span.screen { display:block; position:absolute; height:1000px; background:transparent url(crt-screen.gif) top left repeat; .crt span.top { display:block; position:absolute; height:70px; background:transparent url(crt-top.png) top left repeat-x; .crt span.bottom { display:block; position:absolute; bottom:0; height:110px; background:transparent url(crt-bottom.png) bottom left repeat-x; You will also need to download three images; crt-screen.gif, crt-top.png, and crt-bottom.png. These images make up the pixel pattern plus the top and bottom shadow. Support for IE 6 and below You didn't think it would be that easy did you? We have old versions of Internet explorer to deal with! IE6 and older versions do not support alpha transparency in png images so we're going to disable the top and bottom shadow for those poor users. To do that, we will expose an IE-only stylesheet using IE conditional comments. Make sure you include it after the main stylesheet. Here's the HTML: Download the IE-only stylesheet here, it's very simple: .crt span.top, .crt span.bottom { display:none; Lets take it further and reduce the quality ;) If fuzzy pixelation is not enough for you, then let's add some bad reception just for fun. To do that I'm going to add another span with a snowy animation crt-snow.gif. I'm also going to use a link instead of a div and allow the snow to be turned off when you hover over the image. Unfortunately for IE6 users the hover won't work, so you will be stuck with bad reception forever, unless of course you upgrade your browser. Here it is in all it's fuzzy glory: Nice! That's really bad quality now. Here's the amended HTML with the extra span: And here is the complete CSS file with the extra bits for the snow animation layer: .crt { float:left; position:relative; overflow:hidden; .crt img { display:block; float:left; .crt span.screen, .crt span.snow { display:block; position:absolute; height:1000px; background:transparent url(crt-screen.gif) top left repeat; .crt span.snow { background:transparent url(crt-snow.gif) top left repeat; .crt:hover span.snow { display:none; .crt span.top { display:block; position:absolute; height:70px; background:transparent url(crt-top.png) top left repeat-x; .crt span.bottom { display:block; position:absolute; bottom:0; height:110px; background:transparent url(crt-bottom.png) bottom left repeat-x; That's it for now. You can download my video effect demo (crt.zip) that includes all the files mentioned above if you want to experiment with it. Have fun. - Matt =) Follow me on Twitter @mattjamestaylor Tagged: Enjoy this article? If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting!
1.1 1.2 2.1 2.2 3.1 4.1 8.1 9.1 10.1 11.1 15.1 17.1 18.1 20.1 21.1 23.1 24.1 27.1 30.1 31.1 33.1 34.1 35.1 36.1 38.1 39.1 40.1 43.1 44.1 45.1 46.1 47.1 49.1 50.1 52.1 53.1 54.1 55.1 56.1 58.1 59.1 60.1 62.1 63.1 64.1 65.1 65.2 65.3 65.4 65.5 66.1 67.1 68.1 69.1 70.1 71.1 72.1 73.1 73.2
Svi koji se bave razvojem weba vjerojatno su ponekad imali potrebu horizontalno centrirati block elemente koji nemaju fiksnu širinu. U ovom vodiču učimo Vas kako to najelegantnije izvesti. Postoji nekoliko metoda za izvesti identičnu stvar međutim ova ne zahtjeva CSS hackove ni Javascriptove, a podržana je u svim browserima, pa čak i Internet Exploreru 6. Uz ovaj CSS trik, vaš kôd ostati će validan. Stvari naučene u ovom naprednijem vodiču često možemo primjeniti na elemente poput navigacije, paginacije i slično. Naš (x)HTML kôd između body tagova izgledati će ovako: Početna O nama Usluge Kontakt Naš CSS kôd izgledati će ovako: padding: 0; margin: 0; body { font-family: Georgia, "Times New Roman", Times, serif; a, a:visited { text-decoration: none; a:focus, a:hover { #container { margin: 30px; #nav { overflow: hidden; position: relative; background: #EFEFEE; #nav ul { float: left; position: relative; #nav li { display: block; float: left; list-style: none none outside; position: relative; font-size: 18px; margin-left: 1px; #nav a { display: block; padding: 6px 12px; background: #DDDDDD; line-height: 25px; #nav a.selected { color: #FFFFFF; background: #333333; Objašnjenje metode Možda se neki CSS property-i koji nisu vezani uz veličine i boje čine suvišni, ali ukoliko izostavite koji stvar vjerojatno neće fukcionirati. Prije svega, bitno je utvrditi kako floatani elementi bez property-a width imaju širinu koliko je širok sadržaj tog elementa. Omotač navigacije sa id-om nav ima property overflow budući da je sadržaj unutar njega floatan i bez ove ili neke druge metode za čišćenje visina tog diva iznosila bi 0. Ovakav način čišćenja ne radi u Internet exploreru 6. Druga stvar zbog koje nam je potreban properyty overflow je kako ul element ne bi stvorio dodatnu horizontalnu navigaciju. Također je bitno napomenuti da ukoliko koristite padajuće izbornike overflow hidden bi ih prekrio. Upute za čišćenje nakon float elemenata moći ćete pročitati u jednom od sljedećih vodiča. Metoda za centriranje funkcionira tako da prvo ul floatamo kako bi se prilagodio sadržaju, a zatim smo ga pomaknuli u desno za 50% širine njegovog roditelja (eng. parent), u ovom slučaju div-a sa id-om nav. Elemente li također smo prvo floatali kako bi se prilagodili sadržaju, a zatim svakog od njih pomičemo u lijevo za 50% nakon čega bi stvar trebala biti centrirana. Rezultat Ukoliko ste sve pažljivo slijedili, tada biste trebali dobiti nešto nalik na sliku ispod: Pokušajte resizeati browser kako biste utvrdili da je Vaša navigacija uvijek na sredini. Resursi HTML dokument ovog vodiča sa uključenim CSS-om preuzmite ovdje. Nadamo se da je ovaj vodič koristio! Za sva pitanja slobodno se obratite na mail igor@ucionica.net.