Czyli wstążka po tunningu, bez użycia grafiki.

Źródło: http://cssdeck.com/labs/iaa9esiq

HTML



<!-- Lets make a cool single element ribbon --> <h1> Single Element - Pure CSS3 - Type here...</h1> <!-- PrefixFree to deal with vendor prefixes --> <script src="//thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript"></script>

CSS


/*Basic reset*/ * {margin: 0; padding: 0;} html, body {height: 100%;} body { background: #B1E3E2; box-shadow: inset 0 0 100px 20px #80D0CF; text-align: center; } h1 { display: inline-block; font-size: 14px; line-height: 28px; color: #8699A0; text-shadow: 0 0 1px #758890; margin: 120px 0; font-family: arial, verdana; outline: none; padding: 14px 30px; position: relative; text-transform: uppercase; /*A little shadow for 3d effect*/ /*Finally another shadow to negate some aspects of the :after element to complete the effect. This drops a shrinked shadow over the :after element with the same color like that of the background. The shadow is shrinked by the same offset amount = 18. And it is moved down by twice the offset amount to cover the entire height of the :after element*/ box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1), 0 36px 0 -18px #B1E3E2; } /*The ribbon ends*/ h1:before { content: ''; position: absolute; top: 18px; left: -15%; z-index: -1; width: 130%; /*We will be using the triangle logic - 2 sided borders and 0 height. That will create negative triangles on the left and right*/ height: 0; border: 28px solid rgba(0, 0, 0, 0); border-left: 28px solid #B1E3E2; border-right: 28px solid #B1E3E2; /*Same color as the container which is the body in this case*/ } /*The after pseudo element will negatve the bottom part of the ribbon completing the effect*/ h1:after { content: ''; width: 100%; height: 0; position: absolute; top: 100%; left: 0; z-index: -1; /*The height of the top border is same as width of the left/right borders for the smoothest effect. The height of the top border is also the same as the offset the :before element has from the top*/ border-top: 18px solid #99acb2; border-left: 18px solid transparent; border-right: 18px solid transparent; } h1, h1:before { /*Some cool multi-background - we will use a combination of 4 backgrounds to create a cool effect*/ background-image: /*2 grey borders*/ linear-gradient( transparent 8%, rgba(0, 0, 0, 0.1) 8%, rgba(0, 0, 0, 0.1) 14%, transparent 14%, transparent 86%, rgba(0, 0, 0, 0.1) 86%, rgba(0, 0, 0, 0.1) 92%, transparent 92% ), /*white gloss gradient*/ linear-gradient( rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) ), /*thin stripes*/ linear-gradient( 45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ), /*white base*/ linear-gradient(white, white); background-size: cover, /*borders*/ cover, /*white gloss*/ 4px 4px, /*thin stripes*/ cover; /*base white*/ } h1, h1:before, h1:after { box-sizing: border-box; /*Fix to make the borders appear on the ribbon ends also*/ background-origin: border-box; }

CSS3 - a cool single element ribbon

0 Read More

Myślę że każdy, kto choć czasem ogląda materiały związane z tworzeniem stron, miał okazję zobaczyć Lavalamp menu. Pierwsze menu wykonane w ten sposób napisano już parę lat temu, co tym przypadku jest czasem bardzo odległym. Dziś przedstawiam odświeżoną wersję Lavalamp menu.

Mamy do wyboru 3 efekty hoover - pływające podkreślenie, pływająca czerwona kulka, a w przypadku serca - no jak jest serce, musi być też strzała ;) Może troszkę tandetne, jednak dzięki temu widać, jaki potencjał twórczy kryje się w niepozornym menu- serca czy czerwoną kulkę możemy zastąpić... wszystkim.


Źródło: http://cssdeck.com/labs/wwahaw2y

HTML

<div class="ph-line-nav nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div> </div> <div class="ph-dot-nav nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div> </div> <div class="ph-heart-nav nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div> </div>

CSS

/* ---- reset ------*/ html, body, div, a { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } /* --- basic styles ----*/ body { font-family: "Unica One"; font-size: 1.5em; background: #f2f2f2; text-shadow: 0 1px 0 white; } /* --- for all three examples ----*/ .nav { text-align: center; overflow: hidden; margin: 2em auto; width: 480px; position: relative; } .nav a { display: block; position: relative; float: left; padding: 1em 0 2em; width: 25%; text-decoration: none; color: #393939; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } .nav a:hover { color: #c6342e; } .effect { position: absolute; left: -12.5%; -webkit-transition: 0.7s ease-in-out; -moz-transition: 0.7s ease-in-out; -o-transition: 0.7s ease-in-out; -ms-transition: 0.7s ease-in-out; transition: 0.7s ease-in-out; } .nav a:nth-child(1):hover ~ .effect { left: 12.5%; } .nav a:nth-child(2):hover ~ .effect { left: 37.5%; } .nav a:nth-child(3):hover ~ .effect { left: 62.5%; } .nav a:nth-child(4):hover ~ .effect { left: 87.5%; } /* ----- line example -----*/ .ph-line-nav .effect { width: 90px; height: 2px; bottom: 36px; background: #c6342e; box-shadow: 0 1px 0 white; margin-left:-45px; } /* ----- dot example -----*/ .ph-dot-nav:after { content: ""; display: block; position: absolute; width: 100%; height: 1px; background: #c6342e; bottom: 40px; } .ph-dot-nav a:after { content: ""; position: absolute; width: 4px; height: 4px; bottom: 38px; left: 50%; margin-left: -2px; background: #c6342e; border-radius: 100%; } .ph-dot-nav .effect { width: 10px; height: 10px; bottom: 36px; margin-left: -5px; background: #c6342e; border-radius: 100%; } /* ----- heart example -----*/ .ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before { background: url('http://pepsized.com/wp-content/uploads/2013/01/llldemo/images/heart.png') no-repeat; } .ph-heart-nav .effect { position: absolute; bottom: 26px; background-position: 0 0; height: 8px; width: 62px; margin-left:-31px; } .ph-heart-nav a:before { content: ""; display: block; position: absolute; left: 50%; bottom: 20px; background-position: -62px 0; height: 20px; width: 11px; margin-left: -11px; } .ph-heart-nav a:after { content: ""; display: block; position: absolute; left: 50%; bottom: 20px; z-index: 1; background-position: -73px 0; height: 20px; width: 11px; }

CSS - Lavalamp menu, wariant drugi

0 Read More

Proste i przejrzyste.


Źródło: http://cssdeck.com/labs/light-horizontal-navigation

HTML

<!--DOCTYPE html--> <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Light Horizontal Navigation</title> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body> <div class="container"> <nav> <ul class="nav"> <li><a href="#" title="Home">Home</a></li> <li class="active"><a href="#" title="Products">Products</a></li> <li><a href="#" title="Support">Support</a></li> <li><a href="#" title="About">About</a></li> <li><a href="#" title="Blog">Blog</a></li> <li><a href="#" title="Contact">Contact</a></li> </ul> </nav> </div> </body> </html>

CSS

/* * Copyright (c) 2012-2013 Thibaut Courouble * http://www.cssflow.com * * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php * * View the Sass/SCSS source at: * http://www.cssflow.com/snippets/light-horizontal-navigation/demo/scss * * Original PSD by Pixeden: http://goo.gl/1QBnB * * Dark version: http://cssdeck.com/labs/dark-horizontal-navigation */ @import "http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"; body { font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; color: #404040; background: #e6e6e6; } .container { margin: 100px auto; width: 540px; text-align: center; } .nav { height: 48px; display: inline-block; } .nav > li, .nav:active > .active { float: left; position: relative; margin: 0 0 4px; height: 44px; color: #595959; text-shadow: 0 1px white; background-color: rgba(0, 0, 0, 0.05); border: 1px solid; border-color: #cfcfcf #d6d6d6 #c8c8c8; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); -webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1); } .nav > li:hover { color: #539f07; text-shadow: 0 1px white, 0 0 20px white; } .nav > li.active, .nav > .active:active, .nav > li:active { z-index: 2; margin: 4px 0 0; height: 43px; color: #404040; background: transparent; border-color: #ccc; border-width: 1px 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4); } .nav > li:active { z-index: 3; } .nav > li:first-child { border-left-width: 1px !important; border-left-color: #c6c6c6; border-radius: 5px 0 0 5px; } .nav > li:last-child { border-right-width: 1px !important; border-right-color: #c6c6c6; border-radius: 0 5px 5px 0; } .nav > li + li, .nav:active > .active + li, .nav:active > li + .active { border-left-width: 0; } .nav > .active + li, .nav > .active:active + li, .nav > li:active + li, .nav > li:active + .active { border-left-width: 1px; } .nav > li > a { display: block; position: relative; line-height: 44px; padding: 0 20px; font-size: 12px; font-weight: bold; color: inherit; text-decoration: none; outline: 0; } .nav > li > a:before { content: attr(title); position: absolute; top: 1px; left: 20px; color: rgba(255, 255, 255, 0.4); text-shadow: none; }

CSS - Horyzontalne menu

0 Read More

Szablon do wykorzystania na stronach internetowych. Początkowo wszystkie elementy są widoczne, jednak po wskazaniu kursorem jednego z nich - wybrany zostaje przedstawiony jak dotychczas, natomiast inne elementy (grafika i tekst) stają się półprzezroczyste.


Źródło: http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

HTML

<div id="wrapper"> <div id="columns"> <div class="pin"> <img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uvdkBY7T4cQs_8Y98SxNZw8oAdPPkaOSKf3iJkuy2HXjnJr3A9-vwvP3aezw9qnfZ8Qy_ttnl3hU0o5Y_v6EV5fZz5Ysa12JVe_pJqzOhYSE51x6462sM=s0-d"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uFJ6gz_KrvOpayUQZUIJ5Imjyw5Q4Kq6GQ-bhB1qt1NoFLcrNbHbIJTrXvBPTLj1kUdDVf0yJFNGAcmde5IgsbIHpR90ddDYlHOhzl9TXfwdDDroSxEe4=s0-d"> <p> Donec a fermentum nisi. </p> </div> <div class="pin"> <img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vhbuXNgslGwfr_7ozk_SnxUq5NLpn7uSbtLt-P_4lHrU3FYLk9ysQEf13kAF0ME-ydobDQmUOHskaXXZLU2Z1Z3DJ43U_aCkpOWY8O0L3_6Lxsm17hm88=s0-d"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. </p> </div> </div> </div>

CSS

body { background: url(http://subtlepatterns.com/patterns/scribble_light.png) ; } #wrapper { width: 90%; max-width: 1100px; min-width: 800px; margin: 50px auto; } #columns { -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; column-count: 3; column-gap: 15px; column-fill: auto; } .pin { display: inline-block; background: #FEFEFE; border: 2px solid #FAFAFA; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); margin: 0 2px 15px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; padding: 15px; padding-bottom: 5px; background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9); opacity: 1; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .pin img { width: 100%; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 5px; } .pin p { font: 12px/18px Arial, sans-serif; color: #333; margin: 0; } @media (min-width: 960px) { #columns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } } @media (min-width: 1100px) { #columns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } } #columns:hover .pin:not(:hover) { opacity: 0.4; }

CSS - Layout z efektem Hover (inspiracja: Pinterest)

0 Read More

Wstawiamy dowolne zdjęcie, natomiast całą resztę bierze na siebie CSS. W efekcie otrzymujemy poświatę naokoło ramki- wszystko oczywiście dopasowane kolorystycznie.

Najlepszy efekt uzyskamy na ciemnym tle.

Wykorzystuje filtry SVG.


Źródło: http://cssdeck.com/labs/ambi-glow

HTML

<pre class="brush:html"><!--[if lt IE 7]> <div class="wrapper lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <div class="wrapper lt-ie10 lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <div class="wrapper lt-ie10 lt-ie9"> <![endif]--> <!--[if IE 9]> <div class="wrapper lt-ie10"> <![endif]--> <!--[if gt IE 9]><!--> <div class="wrapper"> <!--<![endif]--> <div class="centered"> <div class="inner"> <img alt="nostalgia by Nikos Zacharoulis" class="pic" height="280" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s4vsOaBOEgV0Aj9xvnLDJbLy9x6JBwIBiBsLTxkavMD-0eclywOHph7kDqglHnTymgGPn87usttgWmUCqDXuCSY65IvMcgX4k0918FDagw7Bs6Dxk_DF0rDe4mhB6xXNz3plHzMZ-oVBsgO-N6E8s=s0-d" width="280"> </div> </div> <!--[if lte IE 9]> <img class="ie-fallback-bg-blur" src="http://pcdn.500px.net/27549003/d409bce305cd0f77f3b12d124f69c7a3659bfaea/3.jpg" width="280" height="280" alt="nostalgia by Nikos Zacharoulis"> <![endif]--> <svg class="bg-blur"> <defs> <filter height="400%" id="blur" width="400%" x="-200%" y="-200%"> <fegaussianblur in="SourceGraphic" stddeviation="70"> </fegaussianblur></filter> </defs> <image filter="url(#blur)" height="280" id="svg-image" width="280" x="150" xlink:href="http://pcdn.500px.net/27549003/d409bce305cd0f77f3b12d124f69c7a3659bfaea/3.jpg" y="150"> </image></svg> <!-- Supported: IE 10 Firefox 3+ Chrome 8+ Safari 6 Opera 9+ Opera mini Opera Mobile 10 Chrome for Android Firefox for Android Fallback to IE-filters in IE9 and below Not supported: Safari 5.1 and below Android Browser 4.2 and below iOS Safari 5.1 and below http://caniuse.com/#feat=svg-filters -->

CSS

/* author: Paul Radzkov http://paulradzkov.com/2013/gaussian_blur/ */ html, body { margin: 0; padding: 0; height: 100%; width: 100%; } html { display: table; } body { display: table-cell; vertical-align: middle; text-align: center; background: black; color: #FFF; } .centered { position: relative; z-index: 1; float: left; left: 50%; } .centered .inner { position: relative; left: -50%; } /* positioning for IE7 */ .lt-ie8 .centered { position: absolute; top: 50%; } .lt-ie8 .centered .inner { top:-50%; } /* blur position */ .bg-blur { height: 580px; width: 580px; position: absolute; left: 50%; top: 50%; margin-left: -290px; margin-top: -290px; z-index: 0; } /* IE fallback */ .lt-ie10 #svg-image { display: none; } .ie-fallback-bg-blur { height: 280px; width: 280px; padding: 80px; position: absolute; left: 50%; top: 50%; margin-left: -290px; margin-top: -290px; z-index: 0; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=70); } /* decoration */ .pic { display: block; border: 1px solid rgba(0,0,0,0.5); box-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 3px 5px rgba(0,0,0,0.2); } .inner:before { content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }

CSS3 - Otaczająca poświata (ambient glow)

0 Read More
Kiedy mamy dopiero co postawiony, czysty system operacyjny, warto skorzystać z Ninite. Na stronie znajduje się instalator z kilkudziesięcioma podstawowymi aplikacjami (do ściągnięcia w jednej paczce) w tym: przeglądarki, komunikatory, odtwarzacze (muzyka, filmy, kodeki), edytory graficzne i tekstowe, oraz inne. Wybieramy co chcemy zainstalować i instaluje nam się samo. Masa czasu zaoszczędzonego i wszystko działa jak powinno. Aż dziw, że nikt wcześniej na to nie wpadł :)
Link: http://ninite.com/

Ninite - Install/Update, must-have po formacie

0 Read More


Kto powiedział, że strony błędów muszą być nudne?

Źródło: http://cssdeck.com/labs/404

HTML


<div class="lineas"> <blockquote class="tr_bq"> <h1> - Opps! 404 Error -</h1> <h2> Sorry! </h2> <h1> Back to <a href="https://www.blogger.com/blogger.g?blogID=4817203568281494964#">home</a></h1> </blockquote> </div>

CSS


@font-face { font-family: papel; src: url('http://dgbxu.com/f/ed856.otf'); } @font-face { font-family: Delicious; font-weight: bold; src: url('http://dgbxu.com/f/ed856.otf'); } blockquote { background: url("http://i.imgur.com/x7maIok.png") no repeat scroll 0 0 transparent; border-radius: 5px 5px 0 0; border-top: 1px solid #DDDDDD; color: #666666; font-size: 13px; font-family:papel; width:50%; height:300px; left:-32px; top:-33px; position:relative; line-height: 22px; margin: 0 auto 0 auto; padding: 21px 45px 14px 50px; } body { background-image:url(http://i.imgur.com/ffp72Fa.png); } h1 { text-align:center; position:relative; width:200px; } h2 { font-size:100px; -webkit-transform: skew(-20deg) rotate(-8deg); -moz-transform: skew(-20deg) rotate(-8deg); -ms-transform: skew(-20deg) rotate(-8deg); -o-transform: skew(-20deg) rotate(-8deg); transform: skew(0deg) rotate(-8deg); text-align:center; color:#a64d79; } .lineas, .lineas:before, .lineas:after { background: url("http://i.imgur.com/x7maIok.png") repeat-y scroll 0 0 transparent; border-radius: 5px 5px 0 0; height:272px; border: 1px solid #ccc; box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); } .lineas { position: relative; width: 50%; padding: 2em; margin: 50px auto; } .lineas:before, .lineas:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: rotateZ(2.5deg); -o-transform: rotate(2.5deg); transform: rotateZ(2.5deg); z-index: -1; } .lineas:after { -webkit-transform: rotateZ(-2.5deg); -o-transform: rotate(-2.5deg); transform: rotateZ(-2.5deg); } a { text-decoration:none; color:#666666; } a:hover { text-decoration:none; color:#073763; transition:.8s; -moz-transition:.8s; -webkit-transition:.8s; }

CSS Error 404 page

0 Read More

Bardzo realistycznie wykonany notatnik. Autor zadbał o gradient w górnej części oraz o kilka kartek pod spodem, co daje lekki efekt trójwymiaru.


Źródło: http://cssdeck.com/labs/notepad

HTML

<!--DOCTYPE html--> <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Notepad</title> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body> <div class="notepad"> <div class="notepad-heading"> <h1>Notepad</h1> </div> <blockquote> The essence of the independent mind lies not in what it thinks, but in how it thinks. &#8212; Christopher Hitchens </blockquote> <blockquote> The best way to predict the future is to invent it. &#8212; Alan Kay </blockquote> </div> </body> </html>

CSS

/* * Copyright (c) 2012-2013 Thibaut Courouble * http://www.cssflow.com * * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php * * View the Sass/SCSS source at: * http://www.cssflow.com/snippets/notepad/demo/scss * * Original PSD by Mathieu Berenguer: http://goo.gl/WYgk5 */ @import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css); body { font: 12px/20px 'Lucida Grande', Verdana, sans-serif; color: #404040; background: #3782b0; } /* Note: I didn't use borders because WebKit extends shadows underneath them, creating inconsistencies with other browsers. When the border is semi-transparent, as this snippet requires, it appears darker because of the shadow underneath it. */ .notepad, .notepad:before, .notepad:after { background-color: white; background-image: -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#e8e8e8 1px, transparent 1px); background-image: -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#e8e8e8 1px, transparent 1px); background-image: -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#e8e8e8 1px, transparent 1px); background-image: linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#e8e8e8 1px, transparent 1px); background-size: 1px 1px, 1px 1px, 23px 23px; background-repeat: repeat-y, repeat-y, repeat; background-position: 22px 0, 24px 0, 0 50px; border-radius: 2px; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5); } .notepad { position: relative; margin: 40px auto; padding: 0 23px 14px 35px; width: 200px; line-height: 23px; font-size: 11px; color: #666; } .notepad p, .notepad blockquote { margin-bottom: 23px; } .notepad :last-child { margin-bottom: 0; } .notepad:before, .notepad:after { content: ''; position: absolute; z-index: -1; top: 100%; left: 3px; right: 3px; margin-top: -2px; height: 4px; background-size: 1px 1px, 1px 1px, 0 0; } .notepad:before { z-index: -2; left: 6px; right: 6px; height: 6px; background-color: #eee; } .notepad-heading { position: relative; margin: 0 -23px 14px -35px; height: 38px; background: #14466a; border-radius: 2px 2px 0 0; background-image: -webkit-linear-gradient(top, #226797, #0c3452); background-image: -moz-linear-gradient(top, #226797, #0c3452); background-image: -o-linear-gradient(top, #226797, #0c3452); background-image: linear-gradient(to bottom, #226797, #0c3452); -webkit-box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black; box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black; } .notepad-heading > h1 { line-height: 36px; font-size: 14px; color: white; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, 0.7); } .notepad-heading:before, .notepad-heading:after { content: ''; position: absolute; bottom: 2px; left: 1px; right: 1px; height: 0; border-top: 1px dashed #617c90; border-color: rgba(255, 255, 255, 0.35); } .notepad-heading:after { bottom: 3px; border-color: #071c2c; border-color: rgba(0, 0, 0, 0.5); }

CSS notatnik

0 Read More


Pod tajemniczą nazwą kryje się zaskakująco ciekawy efekt animacji. Po umieszczeniu kursowa na barwnym kole, "kalejdoskop" płynnie otwiera się ukazując tekst ukryty pod warstwami kolorów.
Źródło: http://cssdeck.com/labs/ae6iuedj

HTML



<!-- autor: Marco Barría https://twitter.com/marco_bf --> <div class="diafragma"> <div class="text"> CSS3</div> <div class="hoja"> </div> <div class="hoja giro"> </div> </div>

CSS



@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); // VAR @D:280px; // size control @R:(@D/2); @B:(@R/10); // opacity @O: 1; html, body{ height:100%; } body{ background:rgb(250,250,200); } .diafragma{ background:rgb(255,255,255); border-radius:100%; border:2px solid rgb(250,250,200); box-shadow: 0 0 @B 2px rgb(250,250,150); cursor:pointer; position:absolute; top:50%; left:50%; margin-left:-@R; margin-top:-@R; width:@D; height:@D; overflow:hidden; } .diafragma:hover &gt; .hoja{ box-shadow: inset 0 @B 0 rgba(250, 250, 0, @O), inset @B 0 0 rgba(250, 200, 0, @O), inset 0 -@B 0 rgba(250, 150, 0, @O), inset -@B 0 0 rgba(250, 100, 0, @O); } .hoja{ border-radius:100%; box-shadow: inset 0 @R 0 rgba(200, 200, 0, @O/2), inset @R 0 0 rgba(150, 150, 0, @O/2), inset 0 -@R 0 rgba(200, 100, 0, @O/2), inset -@R 0 0 rgba(250, 250, 0, @O/2); position:absolute; width:100%; height:100%; transition:box-shadow 1s; } .giro{ transform:rotateZ(45deg); } .text{ color:rgb(200,200,200); position:absolute; text-align:center; font-family: 'Open Sans', sans-serif; font-size:@R/3; line-height:@D; width:100%; -webkit-font-smoothing: antialiased; }

CSS Diafragma - jak kalejdoskop!

0 Read More


Kilkukrotnie wstawiony tekst w nagłówku H1, który zmienia swoją barwę i położenie.
Źródło: http://cssdeck.com/labs/7y2gz430

HTML


<figure> <h1> Glowing text</h1> <h1> Glowing text</h1> <h1> Glowing text</h1> <h1> Glowing text</h1> <h1> Glowing text</h1> <h1> Glowing text</h1> <h1> Glowing text</h1> <h1> Glowing text</h1> <h1> Glowing text</h1> <h1> Glowing text</h1> <h1> Glowing text</h1> </figure>

CSS


@import url(http://fonts.googleapis.com/css?family=Concert+One); h1 { animation:glow 10s ease-in-out infinite; /* For less laggy effect, uncomment this: animation:none; -webkit-text-stroke:1px #fff; =========== */ } * { box-sizing:border-box; } body { background:#0a0a0a; overflow:hidden; text-align:center; } figure { animation:wobble 5s ease-in-out infinite; transform-origin:center center; transform-style:preserve-3d; } @keyframes wobble { 0%,100%{ transform:rotate3d(1,1,0,40deg); } 25%{ transform:rotate3d(-1,1,0,40deg); } 50%{ transform:rotate3d(-1,-1,0,40deg); } 75%{ transform:rotate3d(1,-1,0,40deg); } } h1 { display:block; width:100%; padding:40px; line-height:1.5; font:900 8em 'Concert One', sans-serif; text-transform:uppercase; position:absolute; color:#0a0a0a; } @keyframes glow { 0%,100%{ text-shadow:0 0 30px red; } 25%{ text-shadow:0 0 30px orange; } 50%{ text-shadow:0 0 30px forestgreen; } 75%{ text-shadow:0 0 30px cyan; } } h1:nth-child(2){ transform:translateZ(5px); } h1:nth-child(3){ transform:translateZ(10px);} h1:nth-child(4){ transform:translateZ(15px); } h1:nth-child(5){ transform:translateZ(20px); } h1:nth-child(6){ transform:translateZ(25px); } h1:nth-child(7){ transform:translateZ(30px); } h1:nth-child(8){ transform:translateZ(35px); } h1:nth-child(9){ transform:translateZ(40px); } h1:nth-child(10){ transform:translateZ(45px); }

CSS3 - Animacja tekstu

0 Read More

Założenie jest bardzo proste. Najeżdżamy myszką na jakiś tekst, co skutkuje pojawieniem się dymka z opisem. "Hint" wyświetla się nie od razu, lecz wyłania się z półprzezroczystości, jednocześnie wysuwając obok tekstu. Są 4 kierunki animacji - wyjechanie pionowo/poziomo/w prawo/w lewo. Animacja jest szybka, jednak zauważalna. Miły dla oka efekt :)


Źródło: http://cssdeck.com/labs/hint-css-tooltip

HTML


<h1> HINT</h1> <h3> A CSS tooltip library [WIP]</h3> <em>( Hint.css <a href="http://kushagragour.in/lab/hint/" target="_blank">has been released</a>.)</em> <a class="hint hint--top" data-hint="Yeah, I am &gt;:D" href="https://www.blogger.com/blogger.g?blogID=4817203568281494964#">Look, there is something over me.</a> <br /> <a class="hint hint--right" data-hint="Are you sure you are?" href="https://www.blogger.com/blogger.g?blogID=4817203568281494964#">I am always right!</a> <br /> <a class="hint hint--bottom" data-hint="Sure. Cheers!" href="https://www.blogger.com/blogger.g?blogID=4817203568281494964#">How about a bottoms up?</a> <br /> <a class="hint hint--left" data-hint="LEFT-over Sir..." href="https://www.blogger.com/blogger.g?blogID=4817203568281494964#">What do we get now?</a><br /> <a class="hint hint--right" data-hint="Made by Kushagra Gour" href="https://twitter.com/chinchang457" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v07a8VdihXrkfmANfLbaNQvu57c5W7qb0r1jtkNi6en3mTQg1YIPs6ScTyl4u7Vzn8tXGpHuSRSToXgDvSFWlwxNE6CRKSjHSnRboWRvMXcA-zwxQnGwZFuhw1HBoHBxUPMR-sCVJVUePZApIV=s0-d"></a> <br />

CSS


/** * HINT- A CSS tooltip library */ .hint { position: relative; display: inline-block; } .hint:before, .hint:after { position: absolute; opacity: 0; z-index: 1000000; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; pointer-events: none; } .hint:hover:before, .hint:hover:after { opacity: 1; } .hint:before { content: ''; position: absolute; background: transparent; border: 6px solid transparent; position: absolute; } .hint:after { content: attr(data-hint); background: rgba(0, 0, 0, 0.8); color: white; padding: 8px 10px; font-size: 12px; white-space: nowrap; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } /* top */ .hint--top:before { bottom: 100%; left: 50%; margin: 0 0 -18px 0; border-top-color: rgba(0, 0, 0, 0.8); } .hint--top:after { bottom: 100%; left: 50%; margin: 0 0 -6px -10px; } .hint--top:hover:before { margin-bottom: -10px; } .hint--top:hover:after { margin-bottom: 2px; } /* default: bottom */ .hint--bottom:before { top: 100%; left: 50%; margin: -14px 0 0 0; border-bottom-color: rgba(0, 0, 0, 0.8); } .hint--bottom:after { top: 100%; left: 50%; margin: -2px 0 0 -10px; } .hint--bottom:hover:before { margin-top: -6px; } .hint--bottom:hover:after { margin-top: 6px; } /* right */ .hint--right:before { left: 100%; bottom: 50%; margin: 0 0 -4px -8px; border-right-color: rgba(0,0,0,0.8); } .hint--right:after { left: 100%; bottom: 50%; margin: 0 0 -13px 4px; } .hint--right:hover:before { margin: 0 0 -4px -0; } .hint--right:hover:after { margin: 0 0 -13px 12px; } /* left */ .hint--left:before { right: 100%; bottom: 50%; margin: 0 -8px -4px 0; border-left-color: rgba(0,0,0,0.8); } .hint--left:after { right: 100%; bottom: 50%; margin: 0 4px -13px 0; } .hint--left:hover:before { margin: 0 0 -4px 0; } .hint--left:hover:after { margin: 0 12px -13px 0; }

CSS efekt hover: dymek (Hint)

0 Read More

Proste menu uzyskane za pomocą CSS, którego elementy oprócz podświetlenia, odbijają się lekko w bok w momencie najechania kursorem.

Download: link
Źródło: http://cssdeck.com/labs/wxtftwhm

HTML

<!--//////////////Created by Ryan Bishop./////////////////// Check out more of my work at: http://dribbble.com/RyanBishop ---------------------------OR------------------------------- ------------Follow me on twitter: @abletroner--------------- //////////////////////////////////////////////////////////--> <!-- Google Fonts --> <link href="//fonts.googleapis.com/css?family=Strait" rel="stylesheet" type="text/css"></link> <!-- HTML --> <div class="menu-container"> <div class="nav"> <div class="settings"> </div> </div> <div class="menu"> <ul> <li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uQNQdZiJ1ku_tAqpDtzb0RfMpuhVDPazTEgdQ0heRRolpdDG7_6yOrFwDQcynSYpnxje5NkzFeLcEbL0Ow6Q=s0-d">Search</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tQCa5JB6rp7dswJk7Jeq4XphLpG4VVNQlkpsCRitEmPyS-SUySatLLP4vmspsIdi94SyC4ESmQBuTP5pm4TKQ=s0-d">Upload</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u6-2D-Dr0M7mPGeh-myd-rBFoU7goI32GQZ7icPqW6Hpr17--_snComT8CooIVIvdumJhmil3mrTwV3WOeCvc=s0-d">Location</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_un9z7hbJ031hRUWas5rblqER3za_2w_fQMt4ws0A2qgx4Nmo51braHiSoHIqO2-tRz8tKlYHebUi8QBeZ6m4A=s0-d">Contacts</a></li> </ul> </div> </div>

CSS

/*///////////////Created by Ryan Bishop.//////////////////// Check out more of my work at: http://dribbble.com/RyanBishop ---------------------------OR------------------------------- ------------Follow me on twitter: @abletroner--------------- //////////////////////////////////////////////////////////*/ * { margin: 0; padding: 0; } body { background-color: #a3cabd; } .menu-container { display: block; position: relative; width: 300px; background-color: #f3f0ef; margin: 5% auto 0; padding: 0; border-radius:5px; box-shadow: inset 0 0 1px rgba(255,255,255,1); box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.1); } .nav{ background-color: #ed6b3a; height:40px; border-radius:5px 5px 0 0; } .settings { height:20px; float:right; background-image:url(http://i.imgur.com/CLs7u.png); width:20px; margin:10px; } .menu ul { list-style:none; } .menu ul li { border-top:1px solid rgba(0,0,0,0.1); padding:11px 10px; box-shadow:inset 0 1px 1px #fff; text-indent:10px; } .menu ul li a { font-size:14px; color:#a4a3a3; font-family: 'Strait', sans-serif; font-size:14px; text-decoration:none; text-shadow: 1px 1px 1px #fff; } .menu ul li img { float:left; margin:-2px 0 0 0; } .menu ul li:hover { border-left:3px solid #ed6b3a; background-color:rgba(0,0,0,0.02); }

CSS menu z subtelną animacją

0 Read More

Button z zaokrąglonymi rogami, w całości uzyskany za pomocą CSS. Najlepiej prezentuje się na ciemnym tle. Wstawienie w HTML to zaledwie jedna linijka!

Źródło: http://cssdeck.com/labs/3d-push-button

HTML

<a class="pushButton">EFCIA</a>

CSS

@import url(http://fonts.googleapis.com/css?family=BenchNine) body font-family: "BenchNine", sans-serif background-image: url(http://subtlepatterns.com/patterns/classy_fabric.png) .pushButton display: block color: #fff cursor: pointer width: 120px height: 45px position: absolute top: 50% left: 50% margin-top: -(@height/2) margin-left: -(@width/2) line-height: @height text-align: center border-radius: 5px box-shadow: 0 1px 0 0 rgba(255, 255, 255, .2) inset, 1px 1px 10px 0 rgba(0, 0, 0, .5), -1px -1px 0 0 rgba(0, 0, 0, .4) inset background: linear-gradient(top, #37352e, #2e2d26) background: -moz-linear-gradient(top, #37352e, #2e2d26) text-shadow: 0 1px rgba(0,0,0,.5) transition: all 10ms .pushButton:active background: linear-gradient(top, #2c2a23, #323028) box-shadow: 0 -1px 0 0 rgba(255, 255, 255, .2) inset, 0 1px 10px 0 rgba(0, 0, 0, .4) inset color: #686662 opacity: .9 text-shadow: 0 -1px rgba(0,0,0,.5)

CSS - Zaokrąglony przycisk z efektem przezroczystości

0 Read More

Ramka wykonana w całości przy użyciu CSS, bez zbędnej grafiki.
Źródło: http://cssdeck.com/labs/fence-edge

HTML

div jakiś_napis

CSS

$size: 10px $size-double: $size*2 html height: 100% body height: 100% margin: 0 text-align: center &:after content: "" display: inline-block vertical-align: middle height: 100% width: 0 div display: inline-block vertical-align: middle line-height: 120px width: 75% padding: $size $size font-size: 28px font-family: Arial, sans-serif color: #fff text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) border: $size solid transparent border-width: $size 0 background-color: lightblue background-color: hsla(0, 0%, 0%, 0) $half: 50.5% $color-top: transparent $half, lightblue $half $color-bottom: transparent $half, skyblue $half $top-left: linear-gradient(top left, $color-top) $top-right: linear-gradient(top right, $color-top) $bottom-left: linear-gradient(bottom left, $color-bottom) $bottom-right: linear-gradient(bottom right, $color-bottom) @include background-image(linear-gradient(lightblue, skyblue), $top-left, $top-right, $bottom-left, $bottom-right) background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x background-position: 0 0, $size 0, $size 0, $size 100%, $size 100% background-size: auto auto, $size-double $size-double, $size-double $size-double, $size-double $size-double, $size-double $size-double background-clip: padding-box, border-box, border-box, border-box, border-box background-origin: padding-box, border-box, border-box, border-box, border-box

CSS box z ozdobną krawędzią

0 Read More

Po najechaniu kursorem na grafikę, pojawia się lupa. Sporadycznie spotykany efekt, wyglądający bardzo estetycznie.


Źródło: http://cssdeck.com/labs/magnifying-glass-plugin-with-jquery-and-css3

HTML

<link href="//fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css"> <div id="wrap"> <h1>Super Cool Magnifying Glass For Image Zoom</h1> <h2>Demo</h2> <div class="product"><img class="magniflier" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vd2qM0V67rHDpOEPyyGb-ZxK6Dluns-FDfz2cp67oTgyg9gZr8eh7Fg5a2EA6v-WiO93_kFFGy5VHpuvEiRqXWDIG5dvUBEF0pBwwnVJewbIcvF7gR=s0-d" width="300"></div> <div class="product"><img class="magniflier" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ulweQCARpm8X5VCuzdCyAKbODisoRFiOreRPqEWMmrZe_arfXlECvgffsYGIfrQs2GWKJL9kOSzxiAonqlH0OqQYmFhlqQHMLn0PFl2m27X8GVY28=s0-d" width="300"></div> <div class="product"><img class="magniflier" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uTjElvpTgfAujnQ1oVdLNhIE9Fdp2Zyo3Vsa6rAm4LJCbHSXr4Nu12TGNlFtH9fcA9TtBHaG-8iAG-VJwKmE4VZ5HCbYq2Fz2wSiImAQHR0GlSt-wf=s0-d" width="300"></div> <h2>Usage</h2> <p><a href="http://codetheory.in/image-zoom-magnifying-glass-effect-with-css3-and-jquery/">Read this Article</a></p> </div> <!-- Time for jquery action --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

CSS

.glass { width: 175px; height: 175px; position: absolute; border-radius: 50%; cursor: crosshair; /* Multiple box shadows to achieve the glass effect */ box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); /* hide the glass by default */ display: none; } /********* *** Styles just for DEMO purpose *********/ body{ background: black url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/wild_oliva.png); font-family: 'ubuntu', arial, verdana; color: #fff; font-size: 14px; } #wrap { max-width: 700px; margin: 20px auto; } .product { margin: 20px auto; text-align: center; padding: 20px; } h1, h2, h3 { text-align: center; margin: 50px 0; font-size: 30px; color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75); } h2 { font-size: 26px; margin: 25px 0; } a { color: white; }

JS

$(function() { var native_width = 0; var native_height = 0; var mouse = {x: 0, y: 0}; var magnify; var cur_img; var ui = { magniflier: $('.magniflier') }; // Add the magnifying glass if (ui.magniflier.length) { var div = document.createElement('div'); div.setAttribute('class', 'glass'); ui.glass = $(div); $('body').append(div); } // All the magnifying will happen on "mousemove" var mouseMove = function(e) { var $el = $(this); // Container offset relative to document var magnify_offset = cur_img.offset(); // Mouse position relative to container // pageX/pageY - container's offsetLeft/offetTop mouse.x = e.pageX - magnify_offset.left; mouse.y = e.pageY - magnify_offset.top; // The Magnifying glass should only show up when the mouse is inside // It is important to note that attaching mouseout and then hiding // the glass wont work cuz mouse will never be out due to the glass // being inside the parent and having a higher z-index (positioned above) if ( mouse.x < cur_img.width() && mouse.y < cur_img.height() && mouse.x > 0 && mouse.y > 0 ) { magnify(e); } else { ui.glass.fadeOut(100); } return; }; var magnify = function(e) { // The background position of div.glass will be // changed according to the position // of the mouse over the img.magniflier // // So we will get the ratio of the pixel // under the mouse with respect // to the image and use that to position the // large image inside the magnifying glass var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1; var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1; var bg_pos = rx + "px " + ry + "px"; // Calculate pos for magnifying glass // // Easy Logic: Deduct half of width/height // from mouse pos. // var glass_left = mouse.x - ui.glass.width() / 2; // var glass_top = mouse.y - ui.glass.height() / 2; var glass_left = e.pageX - ui.glass.width() / 2; var glass_top = e.pageY - ui.glass.height() / 2; //console.log(glass_left, glass_top, bg_pos) // Now, if you hover on the image, you should // see the magnifying glass in action ui.glass.css({ left: glass_left, top: glass_top, backgroundPosition: bg_pos }); return; }; $('.magniflier').on('mousemove', function() { ui.glass.fadeIn(100); cur_img = $(this); var large_img_loaded = cur_img.data('large-img-loaded'); var src = cur_img.data('large') || cur_img.attr('src'); // Set large-img-loaded to true // cur_img.data('large-img-loaded', true) if (src) { ui.glass.css({ 'background-image': 'url(' + src + ')', 'background-repeat': 'no-repeat' }); } // When the user hovers on the image, the script will first calculate // the native dimensions if they don't exist. Only after the native dimensions // are available, the script will show the zoomed version. //if(!native_width && !native_height) { if (!cur_img.data('native_width')) { // This will create a new image object with the same image as that in .small // We cannot directly get the dimensions from .small because of the // width specified to 200px in the html. To get the actual dimensions we have // created this image object. var image_object = new Image(); image_object.onload = function() { // This code is wrapped in the .load function which is important. // width and height of the object would return 0 if accessed before // the image gets loaded. native_width = image_object.width; native_height = image_object.height; cur_img.data('native_width', native_width); cur_img.data('native_height', native_height); //console.log(native_width, native_height); mouseMove.apply(this, arguments); ui.glass.on('mousemove', mouseMove); }; image_object.src = src; return; } else { native_width = cur_img.data('native_width'); native_height = cur_img.data('native_height'); } //} //console.log(native_width, native_height); mouseMove.apply(this, arguments); ui.glass.on('mousemove', mouseMove); }); ui.glass.on('mouseout', function() { ui.glass.off('mousemove', mouseMove); }); });

CSS+JS hover zoom effect

0 Read More
Trik w CSS3, który naprawdę wprawia w zdumienie. Fantazyjny efekt wstążki osadzony na zaokrąglonym końcu ramki, która dodatkowo jest wycieniowana na krawędziach. Kod jest długi, jednak warto z niego skorzystać.

HTML

<div class="wrapper"> <div class="ribbon-wrapper-green"> <div class="ribbon-green"> NEWS</div> </div> </div>

CSS

.wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } .ribbon-green:before { left: 0; } .ribbon-green:after { right: 0; } Download: https://www.box.com/s/6fn0l7zzuzii9fdq4nq0
Źródło: http://jsfiddle.net/chriscoyier/H6rQ6/1/

CSS3 - Estetyczna wstążka (bez grafiki!)

0 Read More

Animacja stworzona za pomocą CSS'a - niesamowity efekt!

HTML

<!-- autor: Marco Barría --> <div class="hoja">efcia</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); // ============================================ VAR @D:280px; // size control // diametro @R:(@D/2); // radio @B:(@R/8); @O: 0.5; // opacity @A: 2s; // accelerate html, body{ height:100%; } body{ background:rgb(255,255,244); } .hoja{ color:rgb(220,220,226); position:absolute; top:50%; left:50%; margin-left:-@R; margin-top:-@R; width:@D; height:@D; text-align:center; font-family: 'Open Sans', sans-serif; font-size:@R/4; line-height:@D; -webkit-font-smoothing: antialiased; } .hoja:after, .hoja:before{ content:""; border-radius:100%; position:absolute; top:0; left:0; width:100%; height:100%; transform-origin:center center; transform:rotateZ(0deg) scaleX(1) scaleY(1); } .hoja:after{ box-shadow: inset 0 @B 0 rgba(250, 250, 0, @O), inset @B 0 0 rgba(250, 200, 0, @O), inset 0 -@B 0 rgba(250, 150, 0, @O), inset -@B 0 0 rgba(250, 100, 0, @O); animation:rotar @A linear infinite; } .hoja:before{ box-shadow: inset 0 @B 0 rgba(0, 250, 250, @O), inset @B 0 0 rgba(0, 200, 200, @O), inset 0 -@B 0 rgba(0, 150, 200, @O), inset -@B 0 0 rgba(0, 200, 250, @O); animation:rotarIz @A linear infinite; } @keyframes rotar{ 0%{ transform:rotateZ(0deg) scaleX(1) scaleY(1); } 50%{ transform:rotateZ(180deg) scaleX(0.82) scaleY(0.95); } 100%{ transform:rotateZ(360deg) scaleX(1) scaleY(1); } } @keyframes rotarIz{ 0%{ transform:rotateZ(0deg) scaleX(1) scaleY(1); } 50%{ transform:rotateZ(-180deg) scaleX(0.95) scaleY(0.85); } 100%{ transform:rotateZ(-360deg) scaleX(1) scaleY(1); } }
Źródło: http://cssdeck.com/labs/double-ring

CSS Animowany barwny pierścień - robi wrażenie!

0 Read More

Nie wszyscy wiedzą, że nie potrzebujemy programu graficznego, aby wydobyć palety głównych kolorów z jakiegoś zdjęcia. Wykorzystanie prostego narzędzia, jakim jest Colors Pallete Generator nie tylko skróci nam cały proces, lecz również od razu podzieli wydobyte kolory na kategorie - palety jasne, średnie, ciemne, oraz paleta ogólna. Do każdego z wyodrębnionych kolorów dostajemy jego nazwę w postaci #000000.
Korzystanie z generatora jest bajecznie proste. Początkowo należy wgrać na serwer interesującą nas grafikę (możemy to zrobić wpisując adres url lub wybierając plik z naszego komputera); wgrywanie rozpoczynamy klikając GET PALETTE.
    O czym należy wiedzieć?
  • Maksymalny rozmiar załączonego pliku graficznego: 1MB
  • Dopuszczalne rozszerzenia: .png, .gif, .jpg, .jpeg
  • Uzyskane palety możemy zapisać w postaci pliku *.css lub swatch'y do Photoshop'a *.aco
Źródło: http://www.cssdrive.com/imagepalette/index.php

Colors Pallete Generator - palety kolorów ze zdjęcia

0 Read More

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)