Loading:

NAJMĄDRZEJSZY PREZENT NA ŚWIECIE!🎁 / Tylko DZIŚ!

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.strpbrk() 2.rsort() 3.gzputs() 4._x [AS 2] 5.realpath 6.curl_init 7.hash_file 8.closelog 9.exec 10.yp-order()

56853.05

Strona bez użycia grafiki

W ramach mojego ostatniego wpisu z przykładami w CSS3, chciałem podjąć się wyzwania, stworzenia strony www pozbawionej grafiki… Layout składa się tylko i wyłącznie z CSS. Wykorzystałem kilka transformacji, cieni, przeźroczystości, gradientów i udało się. Sam się zdziwiłem… Pomyślałem, że już za kilka lat będzie można ograniczyć (lub zlikwidować) grafikę na stronach www. Chociaż nie wiem czy będzie to miało znaczenie w przyszłości. Przecież łącza internetowe są coraz szybsze. Z drugiej strony, nasze maszyny również zwiększają swoją moc obliczeniową, więc nasze przeglądarki będą mogły sobie pozwolić na renderowanie znacznie „trudniejszych” projektów.

Pora na efekty

Dobra… trochę zboczyłem z tematu… A więc… acha, mówiłem o stronie bez grafiki … No to tak… Efekt jest ciekawy, chociaż możnaby to wykonać dużo lepiej W założeniu głównym, strona miała być obsługiwana przez silniki Webkit i Gecko … Jednak moja mania niekończenia zaczętych rzeczy wygrała i skończyło się na kompatybilności zaledwie z Firefoxem . Gdyby jednak komuś bardzo zależało na obejrzenie strony wykorzystując silnik WebKit, proszę o komentarz, podrasuję wtedy kod… (Choć jeśli mam być szczery… trochę mi się nie chce ).

Przeznaczenie…

Właśnie… wiedziałem, że o czymś zapomniałem. Zapomniałem napisać jaki cel ma ten wpis… A więc chciałem wam ukazać potęgę CSS3, przekonać was trochę co do jego możliwości i pokazać kilka ciekawych zastosowań. Możecie śmiało wykorzystywać przykłady zamieszczone w tym kodzie.
Jeśli dla kogoś z was kod nie jest zrozumiały, piszcie śmiało. Postaram się go wam wytłumaczyć.

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;}