Czysto i przejrzyście wykończone elementy strony internetowej niekoniecznie muszą być skomplikowane w wykonaniu. Przedstawiam estetyczną ramkę wykonaną za pomocą CSS3, bez użycia grafiki.

Tradycyjnie są dwa rodzaje wiadomości ;) Dobrą jest, że poniższe rozwiązanie działa w Firefoxie, Chromie, Safari i Operze. Natomiast złą wiadomością, że nie działa pod IE7/IE8 (a to niespodzianka!).

HTML

<div class="curved_corners"> <div class="font_titles">Tytuł</div> <div class="font_text">Treść.</div> </div>

CSS

<style type="text/css"> body { background-color: #e8e8e8; } .font_titles { font-family:arial; font-size:28px; font-weight:bold; color:#2b3b4e; } .font_text { font-family:arial; font-size:12px; color:#2b3b4e; } .curved_corners { text-align:justify; margin-left: 70px; border:2px solid #BBBBBB; padding:30px 30px; background:#FFFFFF; width:300px; height:180px; border-radius:20px; -moz-border-radius:20px; /* Firefox 3.6 and earlier */ /* Creating the shadows */ box-shadow: 2px 2px 15px #888888; -moz-box-shadow: 2px 2px 15px #888888; -webkit-box-shadow: 2px 2px 15px #888888; } .spacer { margin-top:15px; } </style> Download: link (plik *.html)
Źródło: http://www.techheadz.co.uk/208.html

CSS3 box z efektem cienia i zaokrąglonymi rogami

0 Read More


Jest wiele sposobów na prezentowanie kodu na stronach internetowych. Jeden z nich to wykorzystanie skryptu napisanego w JavaScript- Syntax Highlighter Scripts Generator, który stosuje specjalne formatowanie składni aż 23 języków (ActionScript3, Bash/shell, ColdFusion, C#, C++, CSS, Delphi, Diff, Erlang, Groovy, JavaScript, Java, JavaFX, Perl, PHP, Plain Text, PowerShell, Python, Ruby, Scala, SQL, Visual Basic, Xml, xHtml, xslt, Html).
Aby z niego skorzystać, przed zamknięciem </head> umieszczamy automatycznie wygenerowany kod ze strony autora, natomiast kod, który chcemy wyświetlić, zawieramy w znaczniku:

HTML

<pre class="brush:css;"> tutaj kod </pre> Nazwę klasy brush:css ustawiamy na zgodną z naszym kodem - np. brush:html.
Mamy do wyboru 8 różnych wariantów kolorystycznych (themes demo).

Źródło: http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator

Syntax Highlighter Scripts Generator

0 Read More

Na CSS wikidot, Bryce Cameron opublikował growl notification style. Jest to lekko lekko transparentna grafitowa ramka o zaokrąglonych rogach uzyskana za pomocą styli.

HTML

<div class="wrapper" id="%priority%"> <div id="background"> <div id="icon"> <img alt="icon" src="growlimage://%image%" /></div> <div id="title"> %title%</div> <div id="text"> %text%</div> </div> </div>

CSS

body { color: #222; font-family: Helvetica, sans-serif; margin: 0; padding: 0; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .wrapper { float: left; } #background { float: left; border: 1px solid #222; -webkit-border-radius: 8px; margin: 5px; width: 300px; padding: 10px 10px; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0,rgba(255,255,255,0.18)), color-stop(0.5,rgba(255,255,255,0.06)), color-stop(0.5,rgba(255,255,255,0)), color-stop(1,rgba(255,255,255,0)) ), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0,rgba(0,0,0,0.7)), color-stop(1,rgba(0,0,0,0.9)) ); -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,0.2) inset, 0 -1px 0 rgba(255,255,255,0.2) inset, 1px 0 0 rgba(255,255,255,0.2) inset, -1px 0 0 rgba(255,255,255,0.2) inset; webkit-animation-name: fadeIn; -webkit-animation-duration: 0.4s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in; } #icon { float: left; width: 48px; height: 48px; margin-right: 15px; } #icon img { width: 48px; height: 48px; } #title { font-weight:bold; padding: 0 2px 0 0; font-size: 15px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); letter-spacing: 0; text-align: left; margin-left: 50px; } #text { font-weight: normal; font-size: 14px; color: #eaeaea; text-shadow: 0 1px 1px rgba(0,0,0,0.6); text-transform: none; margin-top: 6px; margin-left: 63px; word-wrap: break-word; } @-webkit-keyframes emergency { 0% {opacity: 1;} 60% {opacity: 1;} 100% {opacity: 0;} } #emergency #background { border: 1px solid red; -webkit-animation-name: emergency; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; }
Download: link, mirror
Źródło: http://css3.wikidot.com/blog:freebie-growl-notification-style

Przycisk w nowoczesnym stylu

0 Read More
Witajcie!
Permanentnie szukam w sieci różnych informacji, z których później chętnie korzystam. Postanowiłam zebrać wszystko w jednym miejscu. Takie podsumowanie bardzo mi się przyda - być może kiedyś przyda się również któremuś z czytelników :) Jednocześnie informuję że raczej nie będę autorem żadnego z poniższych, a ciekawe znalezisko serwuję zawsze z podaniem źródła (umieszczam kopię jedynie po to, coby nie przepadły smaczki w niepamięć moją i ewentualnych zainteresowanych w przyszłości, kiedy jakaś strona przestanie działać).

Hello world!

0 Read More
Subskrybuj: Posty (Atom)