Loading:


Strona bez użycia grafiki

W ramach mojego ostat­niego wpisu z przy­kła­dami w CSS3, chcia­łem pod­jąć się wyzwa­nia, stwo­rze­nia strony www pozba­wio­nej gra­fiki… Lay­out składa się tylko i wyłącz­nie z CSS. Wyko­rzy­sta­łem kilka trans­for­ma­cji, cieni, prze­źro­czy­sto­ści, gra­dien­tów i udało się. Sam się zdzi­wi­łem… Pomy­śla­łem, że już za kilka lat będzie można ogra­ni­czyć (lub zli­kwi­do­wać) gra­fikę na stro­nach www.  Cho­ciaż nie wiem czy będzie to miało zna­cze­nie w przy­szło­ści. Prze­cież łącza inter­ne­towe są coraz szyb­sze. Z dru­giej strony, nasze maszyny rów­nież zwięk­szają swoją moc obli­cze­niową, więc nasze prze­glą­darki będą mogły sobie pozwo­lić na ren­de­ro­wa­nie znacz­nie „trud­niej­szych” pro­jek­tów.

Pora na efekty

Dobra… tro­chę zbo­czy­łem z tematu… A więc… acha,  mówi­łem o stro­nie bez gra­fiki :D … No to tak… Efekt jest cie­kawy, cho­ciaż moż­naby to wyko­nać dużo lepiej :P W zało­że­niu głów­nym, strona miała być obsłu­gi­wana przez sil­niki Webkit i Gecko … Jed­nak moja mania nie­koń­cze­nia zaczę­tych rze­czy wygrała i skoń­czyło się na kom­pa­ty­bil­no­ści zale­d­wie z Fire­fo­xem :) . Gdyby jed­nak komuś bar­dzo zale­żało na obej­rze­nie strony wyko­rzy­stu­jąc sil­nik WebKit, pro­szę o komen­tarz, pod­ra­suję wtedy kod… (Choć jeśli mam być szczery… tro­chę mi się nie chce :D ).

Prze­zna­cze­nie…

Wła­śnie… wie­dzia­łem, że o czymś zapo­mnia­łem. Zapo­mnia­łem napi­sać jaki cel ma ten wpis… A więc chcia­łem wam uka­zać potęgę CSS3, prze­ko­nać was tro­chę co do jego moż­li­wo­ści i poka­zać kilka cie­ka­wych zasto­so­wań. Może­cie śmiało wyko­rzy­sty­wać przy­kłady zamiesz­czone w tym kodzie.
Jeśli dla kogoś z was kod nie jest zro­zu­miały, pisz­cie śmiało. Posta­ram się go wam wytłumaczyć.



Napisz Artyku³

Listing

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pl-PL">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hs2.pl - Oskar Wójcicki - Portfolio Blog</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="strona">
<div id="logo">
<div id="logo2"></div>
<div id="logo3"></div>
<h1><a href="#">Oskar Wójcicki</a></h1>
<h2>Ciekawe zastosowania CSS3</h2>
<div class="szukaczka">
        <form method="get" id="szukaczka" action="">
        <p class="label"><label for="s">Wyszukiwarka</label></p>
        <p><input type="text" value="" name="s" id="s" /></p>
        <p><input type="submit" id="searchsubmit" value="Szukaj" /></p>
        </form>
</div>
 
<div id="menu">
<ul class='menu'>
<li><a href="#">Index</a></li>
<li><a href="#">O mnie</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
<div id="tresc">
 
<div class="post">
<div class="dataitytul"><div class="dzien">08</div><div class="miesiacrok">Kwiecień<br/>2010</div><h1 class="tytul">Wpis testowy.</h1></div>
<div class="pasek">KATEGORIA: Brak kategorii TAGI: Brak ? Oskar Wójcicki @ 21:00</div>
<div class="tresc">
<div id="obrazek"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus neque, placerat vel fringilla mattis, pulvinar quis risus. Donec non eros leo. Maecenas pulvinar, urna in iaculis viverra, nibh enim ultricies sem, nec molestie metus magna congue justo. Proin pulvinar pharetra mauris ac fringilla. Fusce sed arcu ac felis convallis consequat ut vel lacus. Phasellus ullamcorper, enim ac tempus placerat, ante sapien aliquam nisl, a ullamcorper quam erat in nisi. Suspendisse potenti. In felis ipsum, suscipit ut suscipit id, volutpat at nisl. Nunc turpis turpis, adipiscing eget consectetur in, vulputate quis ipsum. Aliquam consectetur commodo diam eu hendrerit. Duis eget nibh massa, ac consequat lectus. Duis non felis vitae ligula placerat lacinia in nec lectus. Donec non metus in tellus egestas molestie sed vel ligula.
 
Nulla posuere, tellus non venenatis malesuada, leo orci tristique turpis, ut vulputate massa odio nec est. Sed convallis augue sit amet sem vestibulum et hendrerit diam elementum. Nunc blandit venenatis libero, non lobortis magna fringilla a. Sed interdum sagittis lobortis. Nulla ac nibh nulla. Morbi molestie hendrerit libero ut molestie. Ut venenatis turpis non tellus ultricies volutpat venenatis lacus auctor. Nulla pulvinar dui quis sem accumsan accumsan. Etiam vitae dolor at lacus placerat cursus. Aenean sit amet enim ipsum, sed ultricies lectus. Quisque condimentum cursus dignissim. Pellentesque viverra, elit id lobortis porta, sapien dolor lacinia est, eu tempus nibh nisl ut elit. In hac habitasse platea dictumst. Curabitur quis urna ac mauris vestibulum tempor. Sed cursus dui ut lorem mattis at eleifend arcu dapibus. Proin in metus purus. Sed nec eros eget justo vehicula pellentesque at sed tellus. Sed vitae sem vel sem pellentesque luctus eget sed enim. Sed purus sapien, volutpat at venenatis vel, scelerisque in justo.
 
Duis ut metus tortor, in iaculis lacus. In ultricies lacus id urna elementum sollicitudin. Proin dolor enim, volutpat et sagittis et, posuere quis nulla. Curabitur lectus nisi, porta nec congue vitae, blandit vel orci. Etiam tincidunt gravida ipsum. Suspendisse sed dui justo. Sed porttitor ornare dolor, a fringilla urna accumsan in. Suspendisse in mi massa. Etiam vel nisl lectus. Proin metus ante, adipiscing vitae rhoncus nec, adipiscing nec felis. Donec nunc mauris, fermentum et scelerisque in, dictum non diam. Nam venenatis condimentum sapien vel pellentesque. Phasellus arcu est, commodo eu interdum sed, egestas nec erat.
 
Integer purus massa, fringilla vitae tincidunt a, placerat vitae purus. Maecenas orci metus, euismod a euismod non, adipiscing non nibh. Cras sem est, pulvinar sed lobortis eu, semper at augue. Vestibulum ultricies, quam vel adipiscing auctor, neque sapien mattis sapien, eu aliquet risus enim vitae dolor. Curabitur vitae commodo tellus. Proin sit amet ligula in nunc sollicitudin pulvinar eu vitae felis. Vestibulum vitae metus odio, sed sollicitudin enim. Duis at velit leo, a pellentesque sapien. Suspendisse id lacus mauris, vitae suscipit lorem. Sed justo ipsum, aliquam ut dictum vel, molestie eget felis. Proin sit amet tellus nisl, sit amet pellentesque ante. Nullam semper sodales velit eget vestibulum. Integer eu elit rutrum mi elementum mattis. Pellentesque in tellus ut neque ultrices congue at vitae odio. Curabitur porttitor luctus tellus non cursus. Phasellus velit nibh, varius eget molestie a, vehicula et nulla. Proin ac purus sit amet enim semper ornare. Vestibulum id orci id urna vestibulum viverra sed quis turpis.
 
In ut sem ut urna lacinia aliquet. Donec at euismod augue. Maecenas non purus a libero mollis gravida id et neque. Integer consectetur tincidunt lorem id euismod. Maecenas arcu quam, consequat at pellentesque sit amet, venenatis vel purus. Fusce sed lorem sit amet justo cursus ornare at nec dui. Aenean nec risus orci, in dignissim tortor. Mauris quis adipiscing mauris. Proin feugiat, nisi at tincidunt gravida, risus ipsum vulputate nisi, posuere tempor nisi erat eget ligula. Aliquam euismod, ante at faucibus consectetur, nisl enim suscipit nunc, et mattis mauris arcu in ante. Quisque id neque eget arcu ornare posuere. Suspendisse augue mauris, pellentesque ut mattis vitae, sodales at orci. Duis ac nulla sit amet enim lacinia suscipit. Morbi neque dui, commodo vel porttitor non, pharetra vitae odio.
</div>
</div>
 
<div id="trescdol"></div>
</div>
</div>
</body>
</html>

CSS:

body {background:#000;font-family:Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati; margin:0px; font-size:12px; color:#fff;-moz-outline-style:none;}
::-moz-selection {background:#ca000f; color:#fff;}
p {margin:0;padding:0;}
#strona {background-image: -moz-linear-gradient(top, #5d5d5d, #000);width:100%;min-height:768px;}
#logo {width:98%;height:200px;background-image: -moz-linear-gradient(top, #ca000f, #8b000a);-moz-transform: rotate(0.8deg);-moz-box-shadow: 6px 6px 8px #000;-moz-border-radius:0 25px 25px 0;}
#logo h1 {font-size:45px;-moz-transform: rotate(-1deg);font-weight:normal;position:absolute;top:30px;left:230px;}
#logo h1 a {text-decoration:none;color:#f5f5f5;background-image: -moz-linear-gradient(top, #5d5d5d, #000); padding:15px;-moz-border-radius:15px;text-shadow:0px 0px 4px #000;-moz-box-shadow: 0px 0px 2px #343434;opacity:0.98;}
#logo h1 a:hover {color:#fff;text-shadow:0px 0px 8px #000;-moz-box-shadow: 0px 0px 4px #000;opacity:1;}
#logo h2 {font-size:15px;-moz-transform: rotate(-2deg);background-image: -moz-linear-gradient(top, #fff, #ddd);padding:5px;width:220px;text-align:center;color:#000;-moz-border-radius:5px;margin-left:350px;margin-top:-10px;font-size:15px;-moz-box-shadow: 4px 4px 2px #343434;}
#logo2 {width:100%;height:100px;background-image: -moz-linear-gradient(top, #fff, #000);opacity:0.1;-moz-border-radius:25px 25px 0 0;}
#logo3 {width:100%; height:20px;background: -moz-repeating-linear-gradient(top left -44.2deg, #424242, #424242 5px, rgba(255,255,255,0) 5px, rgba(255,255,255,0) 10px);opacity:0.3;}
#menu {height:200px;position:absolute;top:0px;}
ul, li{list-style-type:none;margin:0;padding:0;}
.menu li a{margin-left:-10px; width:220px;height:41px;float:left;line-height:40px;-moz-border-radius:15px;background-image: -moz-linear-gradient(top, #5d5d5d, #000);margin-top:4px;color:#fff;font-size:16px;opacity:0.85; text-decoration:none; text-align:center; font-size:28px;text-transform:uppercase;text-shadow:0px 0px 4px #000;}
.menu li a:hover{opacity:1;text-shadow:0px 0px 8px #000;}
#tresc {width:90%; background:#2e2e2e; min-height:400px;position:absolute; left:50%; top:180px; margin-left:-45%;-moz-box-shadow: 0px 0px 6px #000;-moz-border-radius:20px;}
#trescdol {width:100%; height:20px; background: -moz-repeating-linear-gradient(top left 45deg, #8b000a, #8b000a 5px, rgba(255,255,255,0) 5px, rgba(255,255,255,0) 10px);-moz-border-radius:0 0 20px 20px;}
.post {width:100%;margin-top:5px;}
h1.tytul {float:left; padding-left:10px; margin:0; margin-top:3px; font-size:34px;color:#8b000a;}
.dataitytul {width:100%; float:left; color:#e9e9e9; margin-top:-5px;-moz-transform: rotate(0.6deg);}
.dzien {font-size:38px; float:left; padding-left:5px;-moz-transform: rotate(6.6deg);}
.miesiacrok {font-size:16px; float:left; line-height:14px; margin-top:8px; padding-right:10px; border-right:1px dotted #e9e9e9;-moz-transform: rotate(-0.6deg);}
.pasek {width:100%; float:left; background-image: -moz-linear-gradient(top, #ca000f, #8b000a); padding:3px 0; font-size:12px; margin-bottom:5px;-moz-transform: rotate(0.5deg);}
.tresc {width:100% text-indent:50px; font-size:14px; line-height:18px;padding:10px;color:#e9e9e9;}
#obrazek {background: -moz-radial-gradient(ellipse closest-side, #ff0013, #ffa200 10%, #e1692e 50%, #2e2e2e); width:200px; height:200px; float:left;margin-right:20px;}
.label {display:none;}
.szukaczka {float:left; margin-left:250px;-moz-transform: rotate(-0.8deg);float:left;width:300px;height:26px;}
#s {background-image: -moz-linear-gradient(top, #5d5d5d, #000);border:none;color:#fff;-moz-border-radius:15px 15px 0 0;padding:5px;font-size:16px;margin-top:6px;float:left;width:200px;}
#searchsubmit {background-image: -moz-linear-gradient(top, #fff, #ddd);border:none;color:#000;-moz-border-radius:15px 15px 0 0;padding:5px;font-size:16px;float:left;width:70px;margin-left:5px; margin-top:7px;}
#searchsubmit:hover {background-image: -moz-linear-gradient(top, #5d5d5d, #000);color:#fff;}




Dodano przez: h92 Ranga: Poziom 3 Punktów: 50
Komentarze użytkowników
Dobry artykuł
autor: jacekjacek | 5851 | 2010-06-14 15:30:57


    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2024 v.1.5 | design: diviXdesign & rainbowcolors