Search

Diseño Web HTML5 CSS3 Javascript

Diseño Web – Amit Kvint

Category

CSS3

Opacidad para imagens de fondo CSS3

Con los nuevos pseudo selectores & un poquito de trucos con CSS podemos hasta controlar la opacidad de una imagen de fondo de un div contenedor o del body mismo –

Primero creamos un div y le damos pocision relativa para usar lo como punto de referencia, despues le dasmo un z-index para poder colocar cosas atras de este div –

#content 

position:relative; z-index:1; 
}
 

Ahora creamos con el pseudo selector la parte de atras… con #content:before, le añadimos un contenido vacio con las comillas ahora lo damos un z-index -1 para que aparece abajo y la pocionamos con top, right, left & buttom, añadimos la imagen del fondo & para culminar aplicamos una opcidad mirar esto –

#content:before 
 
{ content:"";
 position:absolute;
 z-index:-1;
 bottom:10px;
 right:10px;
 width:500px;
 height:300px;
 background:url(image.jpg);

 }

Suerte 🙂


					

Cambiar mensaje de error en webkit

<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Custom Message')" />

Galería fotos usando transición con CSS3 (transition)

<html>
<head>
<title>Transitions</title>
<style>
@font-face {
font-family: ‘RieslingRegular’;
src: url(‘fonts/Riesling-fontfacekit/riesling-webfont.eot’);
src: url(‘fonts/Riesling-fontfacekit/riesling-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/Riesling-fontfacekit/riesling-webfont.woff’) format(‘woff’),
url(‘fonts/Riesling-fontfacekit/riesling-webfont.ttf’) format(‘truetype’),
url(‘fonts/Riesling-fontfacekit/riesling-webfont.svg#RieslingRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
body {
font-family: RieslingRegular;
font-size: 2em;
width: 100%;
background: #ccc;
min-width: 980px;
max-width: 1000px;
}
#gallery {
width:90%;
height: 400px;
margin: 0 auto;
background: rgba(222, 222, 40, 0.5);
}
#gallery h2{
text-align: center;
}
#gallery div {
margin-top: 5%;
padding: 1%;
margin-left: 6%;
width: 15%;
border: solid 1px #fff;
float:left;
/*
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
transition: width 1s linear 2s;
#######################################
-moz-transition-property: transform;
-webkit-transition-property: transform;
transition-property: transform;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-duration: 1s;
*/
-webkit-transition: all 0.8s ease; /*ease / ease-in / ease-out ease-in-out*/
color: rgba(222, 222, 40, 0.5);
}
#gallery div:hover{
-webkit-transform: scale(1.2);
-webkit-transform-origin: center top;
-webkit-border-radius: 10px 10px 10px 10px;
box-shadow: 1px 3px 5px #000;
color: #000;
}
#gallery #uno {
background: url(uno.jpg) no-repeat;
}
#gallery #dos {
background: url(dos.jpg) no-repeat;
}
#gallery #tres {
background: url(tres.jpg) no-repeat;
}
#gallery #cuatro {
background: url(cuatro.jpg) no-repeat;
}
#gallery p{
text-align: right;
margin-top: 150px;
font-weight: bold;
}
/*http://www.paulrhayes.com/experiments/cube-3d/*/
</style>
</head>
<body>
<div id=”gallery”>
<h2>Que bonito es el CSS3</h2>
<div id=”uno”>
<p>construir</p>
</div>
<div id=”dos”>
<p>escalera</p>
</div>
<div id=”tres”>
<p>de madera</p>
</div>
<div id=”cuatro”>
<p>en casa</p>
</div>
</div>
</body>
</html>

Blog at WordPress.com.

Up ↑

%d bloggers like this: