Beruflich Dokumente
Kultur Dokumente
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About Me</a></li>
<li><a href="#">Articles on HTML5 & CSS3</a>
<ul id="submenu">
<li><a href="">Difference between SVG vs. Canvas</a></li>
<li><a href="">New features in HTML5</a></li>
<li><a href=" ">Creating links to sections within a webpage</a></li>
</ul>
</li>
<li><a href="">News</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>
.dropdownmenu ul {
background: gray;
list-style: none;
width: 100%;
}
.dropdownmenu li {
float: left;
position: relative;
width:auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
li:hover ul#submenu {
opacity: 1;
top: 40px; /* adjust this as per top nav padding top & bottom comes */
visibility: visible;
#submenu li {
float: none;
width: 100%;
#submenu a:hover {
background: #DF4B05;
#submenu a {
background-color:#000000;
}
HTML
<div class="contenedor">
<p>Hola</p>
<ul>
<li>mundo</li>
<li>Usuario</li>
<li>Jeancarlos</li>
</ul>
</div>
CSS
body {
background: tomato;
.contenedor {
display: flex;
width: 300px;
height: 40px;
color: #fff;
font-size: 40px;
line-height: 40px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: hidden;
ul {
list-style: none;
padding-left: 10px;
ul, p {
margin: 0;
@keyframes cambiar {
}
TEXTO QUE PARPADEA
.text {
font-size:28px;
font-family:helvetica;
font-weight:bold;
color:#71d90b;
text-transform:uppercase;
.parpadea {
animation-name: parpadeo;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name:parpadeo;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
@-moz-keyframes parpadeo{
0% { opacity: 1.0; }
@-webkit-keyframes parpadeo {
0% { opacity: 1.0; }
@keyframes parpadeo {
0% { opacity: 1.0; }
}
BOTON animado
<div class="boton">
</div>
.boton {
border-radius: 4px;
position: absolute;
left: 37px;
top: 45px;
width: 480px;
height: 160px;
box-sizing: border-box;
/* texto*/
font-size: 4em;
line-height: 160px;
text-align: center;
color: #8c888c;
}
.boton:hover {
text-shadow: 0 0 0 ;
.boton:active {
box-shadow: 0 0 0;
color: #8c888c;
text-decoration: none;
}
Formulario de envio de correo
<div id="form-main">
<div id="form-div">
<p class="name">
</p>
<p class="email">
</p>
<p class="text">
</p>
<div class="submit">
<div class="ease"></div>
</div>
</form>
</div>
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
background-size: cover;
height:100%;
#feedback-page{
text-align:center;
#form-main{
width:100%;
float:left;
padding-top:0px;
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
.feedback-input {
color:#3c3c3c;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
.feedback-input:focus{
background: #fff;
box-shadow: 0;
color: #3498db;
outline: none;
.focused{
color:#30aed6;
/* Icons ---------------------------------- */
#name{
background-image:
url(http://rexkirby.com/kirbyandson/images/name.svg);
background-repeat: no-repeat;
}
#name:focus{
background-image:
url(http://rexkirby.com/kirbyandson/images/name.svg);
background-repeat: no-repeat;
#email{
background-image:
url(http://rexkirby.com/kirbyandson/images/email.svg);
background-repeat: no-repeat;
#email:focus{
background-image:
url(http://rexkirby.com/kirbyandson/images/email.svg);
background-repeat: no-repeat;
#comment{
background-image:
url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-repeat: no-repeat;
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
#button-blue{
float:left;
width: 100%;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
margin-top:-4px;
font-weight:700;
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
.submit:hover {
color: #3498db;
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
.submit:hover .ease{
width:100%;
background-color:white;
#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
Visor de imgenes
<div id="slider">
<ul>
<li>SLIDE 1</li>
<li>SLIDE 3</li>
</ul>
</div>
<div class="slider_option">
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
background: #58DDAF;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
h1 {
color: #fff;
text-align: center;
font-weight: 300;
#slider {
position: relative;
overflow: hidden;
border-radius: 4px;
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
a.control_prev:hover, a.control_next:hover {
opacity: 1;
a.control_prev {
a.control_next {
right: 0;
.slider_option {
position: relative;
width: 160px;
font-size: 18px;
}
JS
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
Rotacin de imgenes
body,html {
background: #141415;
width: 100%;
height: 100%;
margin: 0;
padding:0;
.knob, .bg{
position: absolute;
left: 50%;
margin-left: -200px;
.knob {
z-index: 1;
@-webkit-keyframes turn {
100% {
-webkit-transform: rotate(360deg);