Наклейка css

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">


<head>


<link href="/stylesheets/styles.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/javascripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<link href="/stylesheets/smoothDivScroll.css" type="text/css" rel="stylesheet" />


	
	<!--[if IE 7]>
		<link rel="stylesheet" type="text/css" href="ie7.css" />
	<![endif]-->



</head>


<body>


<div id="Awesome" class="anim750">
                
        <div class="reveal circle_wrapper">
        <div class="circle">Привет!</div>
    </div>
                                    
    <div class="sticky anim750">
        <div class="front circle_wrapper anim750">
            <div class="circle anim750"></div>
            </div>
    </div>
                
        <h4>Отклей меня!</h4>
                                    
            <div class="sticky anim750">
        <div class="back circle_wrapper anim750">
            <div class="circle anim750"></div>
        </div>
    </div>
</div>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--[if IE 7]>

<![endif]-->

</head>

<body>

<div class="circle">Привет!</div>

</div>

</div>

<h4>Отклей меня!</h4>

</div>

</html>

SCSS

// customize bootstrap variables here:
@import "bootstrap";
@import "compass";

.anim750{
  @include  transition(all 750ms ease-in-out);
}

#Awesome{
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    backface-visibility: hidden;
}

#Awesome .sticky{
    @include transform(rotate(45deg));
}

#Awesome:hover .sticky{
    @include transform(rotate(10deg));
}

#Awesome .sticky{
    position: absolute;
    top: 0;
    left: 0;
    width:180px;
    height: 180px;
}

#Awesome .reveal .circle{
    @include box-shadow (0 1px 0px rgba(0,0,0,.15));
    font-family: 'helvetica neue', arial;
    font-weight: 200;
    line-height: 140px;
    text-align: center;
    cursor: pointer;
}

#Awesome .reveal .circle{
    background: #fafafa;
}

#Awesome .circle_wrapper{
    position: absolute;
    width: 180px;
    height: 180px;
    left: 0px;
    top: 0px;
    overflow: hidden;
}

#Awesome .circle{
    position: absolute;
    width: 140px;
    height:  140px;
    margin: 20px;
    @include border-radius (999px);
}

#Awesome .back{
    height: 10px;
    top: 30px;
}

#Awesome:hover .back{
    height: 90px;
    top: 110px;
}

#Awesome .back .circle{
    margin-top: -130px;
    background-color: #fbec3f;
 	@include background-image( linear-gradient(bottom, rgba(251,236,63,.0), rgba(255,255,255,.8)));
}

#Awesome:hover .back .circle{
    margin-top: -50px;
}

#Awesome .front{
    height: 150px;
    bottom: 0;
    top: auto;  
    @include box-shadow( 0 -140px 20px -140px rgba(0,0,0,.3));
}

#Awesome:hover .front{
    height: 70px;  
    @include box-shadow( 0 -60px 10px -60px rgba(0,0,0,.1));
}

#Awesome .front .circle{
    margin-top: -10px;
    background: #fbec3f;
    @include background-image(linear-gradient(bottom, rgba(251,236,63,.0) 75%, #f7bb37 95%));

}
#Awesome h4{
    font-family: 'helvetica neue', arial;
    font-weight: 200;
    text-align: center;
    position: absolute;
    width: 180px;
    height: 140px;
    line-height: 140px;
    @include transition( opacity 50ms linear 400ms);
}

#Awesome:hover h4{
    opacity: 0;
    @include transition(opacity 50ms linear 300ms);
}

#Awesome:hover .front .circle{
    margin-top: -90px;
    background-color: #e2d439;
    background-position: 0 100px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

// customize bootstrap variables here:

@import "bootstrap";

@import "compass";

.anim750{

@include transition(all 750ms ease-in-out);

}

#Awesome{

position: relative;

width: 180px;

height: 180px;

margin: 0 auto;

backface-visibility: hidden;

}

#Awesome .sticky{

@include transform(rotate(45deg));

}

#Awesome:hover .sticky{

@include transform(rotate(10deg));

}

#Awesome .sticky{

position: absolute;

top: 0;

left: 0;

width:180px;

height: 180px;

}

#Awesome .reveal .circle{

@include box-shadow (0 1px 0px rgba(0,0,0,.15));

font-family: 'helvetica neue', arial;

font-weight: 200;

line-height: 140px;

text-align: center;

cursor: pointer;

}

#Awesome .reveal .circle{

background: #fafafa;

}

#Awesome .circle_wrapper{

position: absolute;

width: 180px;

height: 180px;

left: 0px;

top: 0px;

overflow: hidden;

}

#Awesome .circle{

position: absolute;

width: 140px;

height: 140px;

margin: 20px;

@include border-radius (999px);

}

#Awesome .back{

height: 10px;

top: 30px;

}

#Awesome:hover .back{

height: 90px;

top: 110px;

}

#Awesome .back .circle{

margin-top: -130px;

background-color: #fbec3f;

@include background-image( linear-gradient(bottom, rgba(251,236,63,.0), rgba(255,255,255,.8)));

}

#Awesome:hover .back .circle{

margin-top: -50px;

}

#Awesome .front{

height: 150px;

bottom: 0;

top: auto;

@include box-shadow( 0 -140px 20px -140px rgba(0,0,0,.3));

}

#Awesome:hover .front{

height: 70px;

@include box-shadow( 0 -60px 10px -60px rgba(0,0,0,.1));

}

#Awesome .front .circle{

margin-top: -10px;

background: #fbec3f;

@include background-image(linear-gradient(bottom, rgba(251,236,63,.0) 75%, #f7bb37 95%));

}

#Awesome h4{

font-family: 'helvetica neue', arial;

font-weight: 200;

text-align: center;

position: absolute;

width: 180px;

height: 140px;

line-height: 140px;

@include transition( opacity 50ms linear 400ms);

}

#Awesome:hover h4{

opacity: 0;

@include transition(opacity 50ms linear 300ms);

}

#Awesome:hover .front .circle{

margin-top: -90px;

background-color: #e2d439;

background-position: 0 100px;

}

DevPulse

полезное из мира IT и программирования

Наклейка css

Добавить комментарий Отменить ответ