efcia w sieci: css

Pokazywanie postów oznaczonych etykietą css. Pokaż wszystkie posty

Pokazywanie postów oznaczonych etykietą css. Pokaż wszystkie posty

Automatyczna zmiana koloru tła strony internetowej.

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

HTML

<div class="color-background"> <div class="color-me"> <p> Play with colors </p> By Imman Vel </div> </div>

CSS

/*---------------------------------- * * Animation Background color * * Date: 22/12/2013 * Author: Imman vel * Fb User Name: Imman00vel * licence: Free * * Compatible Browsers: IE9+, Firefox 5+, Safari 5+, Opera 12+, Chrome *----------------------------------*/ .color-background { position: absolute; top: 0; left: 0; margin: 0 auto; padding: 0; height: 100%; width: 100%; animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */ -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */ -o-animation: colorBackground 20s infinite; /* Opera 12.00 */ } @keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-webkit-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-moz-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-o-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } .color-me { position: relative; top: 35%; background-color: #fff; padding: 20px; font-size: 50px; text-align: center; letter-spacing: 3px; } .color-background .color-me p { padding: 0; margin: 0 0 -15px 0; color: #777; letter-spacing: 5px; font-size: 20px; text-transform: uppercase; }

CSS: Płynna zmiana kolorów tła

Wyraziste podkreślenie przyciąga uwagę. Po najechaniu na napis, podkreślenie zamienia się w subtelną ramkę.

Taki delikatny efekt już w 6 linijkach HTML :)

Źródło: http://cssdeck.com/labs/svg-hover-effect

HTML

<div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> <div class="text">ZACH SAUCIER</div> </svg> </div>

CSS

html, body { background: rgb(20,20,20); text-align: center; height: 100%; overflow: hidden; } .svg-wrapper { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 320px; } .shape { stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; fill: transparent; stroke: #19f6e8; border-bottom: 5px solid black; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; } .text { font-family: 'Roboto Condensed'; font-size: 22px; line-height: 32px; letter-spacing: 8px; color: #fff; top: -48px; position: relative; } .svg-wrapper:hover .shape { stroke-width: 2px; stroke-dashoffset: 0; stroke-dasharray: 760; }

CSS: SVG Hover Effect

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

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

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_uhm2lxicMstLVKtjDbkE9GETH0TwKuhDmhEFRmDh8S5m7KMvr-mZD1ExgBCkYmd3nzxDx4S0HM6FjYplD0CrBgF90ZNCpr3Y4fTtzW7rxr2bB_ryeCe9g=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_tdmseqonHTJOqr7wDhZw8XyqoHCiJ1gUdHbbTBHqflzQyWSjt8QHNyP3RfyL9ipW9vQno_7lPUc60VQXW0r-EmgvMveNDxLsnfVwnWJdONt7EHfNeMns8=s0-d"> <p> Donec a fermentum nisi. </p> </div> <div class="pin"> <img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vodV86TFlNQ9CMOOMyk9ZQGW7EDO8wY7sZoXq83PQBbADwIWrlOalRpAFH3Sy6mPwbcLwwKdOAZdEloSuR4XlY2Wgs_MIvFb473egXao3LFEi1SI4GkVU=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)

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

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

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!

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_tstHuVKH1ffPyj7TVx8TtJ_RoFYTYikTh9oMfDjtVjCiMeYXLVkZ8ywaxFh56rwC4U6sM76Xb76Vll-dVDoE8f9xx3OcI4HjWPaZVRnJHaw0YNjRsFLdLr_IsidP7X-bzyed9KOypCrG5WImJI=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)

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

<link href="//fonts.googleapis.com/css?family=Strait" rel="stylesheet" type="text/css"></link>  <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_vGMB_JMpFbbBbBDEnIvq0P-toXh8u3iRkxQfjad1-ZgTcR02CYcKT0uss-2VI_bjtTJ8AT3yneZCAPnJDTIg=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_t2PY4DQaJgdvdA5TpLXFb5SV4DwvXRhlMpWbm3fxoe-V8EaIRDWriWLuvvLO2F3Dw-LKLoMlDx3aRFapDqpJM=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_us_pb0wUMaSr8zj-PuBgj5Iz2ArRjOZ8Z6ZVhc8m-HnzLzGGp6v9DX0y4x0rkiNf0KF5P2-5INKQwO40kyMQs=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_u8g2HTMqsKmu7WvxsqTCPChlbS8pZlwSQZKUCwhiAbcFLJgOIbKldF5QCawcDplA5B40gIkHjTbjrv3PFxK24=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ą

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

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ą

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_sEOSdr0gzExYKKNq2KgthJ2YQ3JF8XYDojtt0Km2647Oo4KVetNeHDxRsrxzGnckyRT9gfj4SEGsWueORwqSbcG-cl21DPbAMrY2Mk2xlycISHNDup=s0-d" width="300"></div> <div class="product"><img class="magniflier" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u4el0iwtmHBroP5KXHQ6ko6RnKdi6JZtlVZXp1uHwdUD7pnvppnPaAiV499Uvs6VwOWT96NtE0sjtc3H8J8_BiCpAnCCVIGQimnuP6W3DQjozSrrk=s0-d" width="300"></div> <div class="product"><img class="magniflier" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sV27ns94spCQctuXOtX3sa2sNHcH_mmp4RZdSK5msu_QghN6P_Y-2CZbV8aSZmua4bKleF3lCkm2Jts3UQ5imuuYnOTtiF4krQmXXSOI71RMBpDDjP=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>  <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

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

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

Subskrybuj: Komentarze (Atom)