efcia w sieci: maja 2013

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

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

HTML

<h1> Single Element - Pure CSS3 - Type here...</h1>  <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

<html lang="en">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Light Horizontal Navigation</title>  </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_ssnpjZpLRm8COCBGt99vRysom1FjSFSw9Vsi8HjitmV-HMlakgFtladK_zl5l43InMH0Z9MWtOB2iqlsCT0EhlsEEljlgLqYbaJ1rOSasio5CsoqP0iI8=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

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

<html lang="en">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Notepad</title>  </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. — Christopher Hitchens </blockquote> <blockquote> The best way to predict the future is to invent it. — 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

<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 > .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 >: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