Inicio Uncategories Paginação Hover Gradiente

Paginação Hover Gradiente

18:21

HTML

------------------------------------------------------------------------------------------------------------
<div id="container">
<div class="pagination">
<p>without gradient</p>
<a href="#" class="page">first</a><a href="#" class=
"page">2</a><a href="#" class="page">3</a><span
class="page active">4</span><a href="#" class=
"page">5</a><a href="#" class="page">6</a><a href="#"
class="page">last</a>
</div>
<div class="pagination">
<p>with gradient</p>
<a href="#" class="page gradient">first</a><a href=
"#" class="page gradient">2</a><a href="#" class=
"page gradient">3</a><span class=
"page active">4</span><a href="#" class=
"page gradient">5</a><a href="#" class=
"page gradient">6</a><a href="#" class=
"page gradient">last</a>
</div>
<div class="pagination dark">
<p>dark without gradient</p>
<a href="#" class="page dark">first</a><a href="#"
class="page dark">2</a><a href="#" class=
"page dark">3</a><span class=
"page dark active">4</span><a href="#" class=
"page dark">5</a><a href="#" class=
"page dark">6</a><a href="#" class=
"page dark">last</a>
</div>
<div class="pagination dark">
<p>dark with gradient</p>
<a href="#" class="page dark gradient">first</a><a
href="#" class="page dark gradient">2</a><a href="#"
class="page dark gradient">3</a><span class=
"page dark active">4</span><a href="#" class=
"page dark gradient">5</a><a href="#" class=
"page dark gradient">6</a><a href="#" class=
"page dark gradient">last</a>
</div>
</div>

CSS

------------------------------------------------------------------------------------------------------------ 
body {
    background: #dfdfdf;
    color: #666;
    font: 14px/24px sans-serif;
}
#container {
    width: 600px;
    margin: 0 auto;
    padding: 20px;
}
.btn {
    display: inline-block;
    padding: 10px;
    border-radius: 5px; /*optional*/
    color: #aaa;
    font-size: .875em;
}
.pagination {
    background: #f2f2f2;
    padding: 20px;
    margin-bottom: 20px;
}
.page {
    display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}
.page:hover, .page.gradient:hover {
    background: #fefefe;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}
.page.active {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}
.page.gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));
    background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9);
}
.pagination.dark {
    background: #414449;
    color: #feffff;
}
.page.dark {
    border: solid 1px #32373b;
    background: #3e4347;
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);
    color: #feffff;
    text-shadow: 0px 1px 0px rgba(0,0,0, .5);
}
.page.dark:hover, .page.dark.gradient:hover {
    background: #3d4f5d;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
    background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);
}
.page.dark.active {
    border: none;
    background: #2f3237;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .1);
}
.page.dark.gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#565b5f), to(#3e4347));
    background: -moz-linear-gradient(0% 0% 270deg,#565b5f, #3e4347);
}
Link : http://cssdeck.com/labs/css-pagination-styles
------------------------------------------------------------------------------------------------------------

Tooltip

HTML

<body>
  <a>Tooltip<i>This tootips's arrow also has a border.<br />Pure CSS!<br />
    <img src="http://placehold.it/350x50"> </i></a>
</body>

CSS 

body {
background: #32373D;
text-align:center;
padding: 500px 0 80px;
}
a {
position: relative;
cursor: pointer;
font: normal normal 85% sans-serif;
color: white;
text-shadow: #090A0B 0 -1px;
display: inline-block;
}
a > i {
text-align: center;
font: italic normal 90% Georgia, serif;
line-height: 150%;
color: black;
text-shadow: white 0 1px;
background: #DDD;
background-clip: padding-box;
box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
border: 5px solid #111;
border: 5px solid rgba(0, 0, 0, 0.5);
border-radius: 3px;
position: absolute;
width: 350px;
left: 50%;
margin-left: -175px; /* 50% szerokości diva */
padding: 10px 0;
bottom: 100%;
margin-bottom: 10px;
visibility:hidden;
opacity:0;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
a > i:before, a > i:after {
content: "";
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: 100%;
left: 50%;
margin-left: -10px;
}
a > i:before {
border-top: 10px solid #111;
border-top: 10px solid rgba(0, 0, 0, 0.5);
margin-top: 5px;
}
a > i:after{
border-top: 10px solid #DDD;
margin-top: -2px;
z-index: 1;
}
a:hover > i {
visibility: visible;
opacity: 1;
}

Link: http://cssdeck.com/labs/css3-tooltip
------------------------------------------------------------------------------------------------------------

Caixa de Pesquisa

HTML


<div class="centered">
  <h1>custom search input</h1>
  <div class="hover-me">hover me -> </div>
  <div class="search">
    <input type="text" placeholder="search">
  </div>
</div>
<h3 class="neatnait-love">
  made with love at
  @<a href="http://neatnait.com">neatnait</a>
</h3>

CSS


@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
@import url(http://fonts.googleapis.com/css?family=Gochi+Hand);
@import url(http://fonts.googleapis.com/css?family=Roboto:100,300);
body{
  margin:5%;
}
*{
  box-sizing:border-box;
  backface-visibility:hidden; /*avoid glitches*/
}
h1{
  font-family: 'Roboto', sans-serif;
  font-weight:100;
}
.centered{
  width:320px;
  margin:auto;
}
.hover-me{
  font-family: 'Gochi Hand', cursive;
  font-size:2em;
  float:left;
  top:-200px;
  position:relativeM
}
/*get rid of that blue focus border*/
input:focus{
  border:0;
  outline:0;
}
.search{
  width:20px;
  height:20px;
  border: 3px solid #111;
  border-radius:10px;
  transition:
    height .2s ease .5s,
    width .5s ease 0s;
  position:relative;
  /*margin:0em 11em;*/
  float:left;
  margin-left:1em;
  top:5px;
}
/* hide the input at normal state */
.search input{
  font-family: 'Open Sans', sans-serif;
  font-weight:700;
  height:0px;
  width:0px;
  border:0;
  margin:0;
  padding:0 10px;
  background:transparent;
}
/*the magnifiying glass handle*/
.search:after{
  content:"";
  position:absolute;
  width:1px;
  height:7px;
  bottom:-8px;
  right:-5px;
  background:#111;
  border: 2px solid #111;
  transform:rotate(-45deg);
  transition:all .5s ease;
}
.search:hover{
  width:120px;
  height:30px;
  transition:
    height .2s ease,
    width .5s ease .5s;
}
/*grow full width/height on hover*/
.search:hover input{
  width:100%;
  height:100%;
  transition:all .5s ease;
}

.neatnait-love{
  width:250px;
  margin:auto;
  margin-top:5em;
  font-weight:300;
  font-family: 'Roboto', sans-serif;
  text-shadow:0 5px 20px #000;
  color:white;
  background:#111;
  padding:2em 6em 2em 4em;
  position:fixed;
  bottom:10%;
  left:50%;
  margin-left:-125px;
}
a{
  text-decoration:none;
  color:#f06;
  border-bottom:1px solid white;
  padding-bottom:5px;
  transition:border .5s ease;
}
a:hover{
  border-color:#111;
  color:#f06;
  border-bottom:4px solid white;
}

1 Resposta aos "Paginação Hover Gradiente"

Obrigado por seus comentários

Assinar: Postar comentários (Atom)