A continuación les dejo uno de mis proyectos actuales, utiliza Wordpress 5.3 con una plantilla diseñada y adaptada para esta fundación del Ecuador utilizando HTML5+PHP+CSS3.
Captura:
[Leer Más]
Captura:
Como crear barras de proceso en CSS3
A continuación les dejo varias demostraciones de como utilizar las barras de progreso para implementar en sus páginas webs:
Ejemplo 1:
Ejemplo 2:
Ejemplo 3:
Ejemplo 4:
El texto original lo pueden encontrar en CSS TRICKS.
[Leer Más]
Ejemplo 1:
<div class="meter">
<span style="width: 25%"></span></div>
Ejemplo 2:
<div class="meter orange nostripes">
<span style="width: 33.3%"></span>
</div>
Ejemplo 3:
<div class="meter red">
<span style="width: 80%"></span>
</div>
Ejemplo 4:
<div class="meter animate">
<span style="width: 50%"><span></span></span>
</div>
El texto original lo pueden encontrar en CSS TRICKS.
Como crear pestañas con CSS3
Aquí les dejo un truco extraído de CSS Stuff para crear pestañas estilo menú en CSS3:
Código CSS:
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
h1 {
width: 660px;
margin: 0 auto;
padding: 20px 0;
color: #222;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>(Better) Round Out Tabs</title>
<link rel='stylesheet' href='css/style.css'>
<style>
.tabrow {
text-align: center;
list-style: none;
margin: 200px 0 20px;
padding: 0;
line-height: 24px;
height: 26px;
overflow: hidden;
font-size: 12px;
font-family: verdana;
position: relative;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.selected {
background: #FFF;
color: #333;
z-index: 2;
border-bottom-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}
.tabrow li:before,
.tabrow li:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
.tabrow li:before {
left: -6px;
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
}
.tabrow li:after {
right: -6px;
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
}
.tabrow li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
box-shadow: -2px 2px 0 #FFF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$("li").click(function(e) {
e.preventDefault();
$("li").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
</head>
<body>
<ul class="tabrow">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li class="selected"><a href="#">Sit amet</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
</ul>
</body>
</html>
De esta forma quedan las pestañas redondeadas:
[Leer Más]
Código CSS:
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
h1 {
width: 660px;
margin: 0 auto;
padding: 20px 0;
color: #222;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>(Better) Round Out Tabs</title>
<link rel='stylesheet' href='css/style.css'>
<style>
.tabrow {
text-align: center;
list-style: none;
margin: 200px 0 20px;
padding: 0;
line-height: 24px;
height: 26px;
overflow: hidden;
font-size: 12px;
font-family: verdana;
position: relative;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.selected {
background: #FFF;
color: #333;
z-index: 2;
border-bottom-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}
.tabrow li:before,
.tabrow li:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
.tabrow li:before {
left: -6px;
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
}
.tabrow li:after {
right: -6px;
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
}
.tabrow li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
box-shadow: -2px 2px 0 #FFF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$("li").click(function(e) {
e.preventDefault();
$("li").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
</head>
<body>
<ul class="tabrow">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li class="selected"><a href="#">Sit amet</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
</ul>
</body>
</html>
De esta forma quedan las pestañas redondeadas:
Como generar un degradado en CSS3
La forma más sencilla de realizar este efecto, es utilizando las nuevas propiedades del CSS3. A continuación les dejo un ejemplo de esta nueva funcionalidad:
Código CSS3:
#linearBg2 { /* fallback */ background-color: #1a82f7; background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #1a82f7); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #1a82f7); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #1a82f7); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #1a82f7); }
Efecto:
Existen varias páginas que permiten generar el código seleccionando un color inicial y final.
[Leer Más]
Código CSS3:
#linearBg2 { /* fallback */ background-color: #1a82f7; background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #1a82f7); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #1a82f7); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #1a82f7); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #1a82f7); }
Efecto:
Existen varias páginas que permiten generar el código seleccionando un color inicial y final.
Como dividir una página web correctamente en HEADER / BODY / FOOTER
La forma fácil y la mejor para que nuestra web esté correctamente dividida en bloques, es dividiendo el contenido en 3 zonas:
Head
Body
Footer
Y que estos, por mas que se cambie el tamaño de la pantalla siempre estén bien ubicados.
El truco es el siguiente:
1-Añadimos el contenedor a nuestra web:
2-Luego desde nuestra hoja de estilo, llamamos a los diseños y le aplicamos los cambios:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}
Y voila!, ya tenemos nuestro contenido dinamico y formateado con DIV y CSS.
Tambien si queremos dividir el contenido con un div en dos partes, es decir si queremos ubicar algo a la izquierda de nuestra web y algo a la derecha, solo debemos añadir los siguientes datos:
Div principal:
Y luego el estilo:
.wrapperpibe{position:relative;}
.rightpibe,.left{width:10%; position:absolute;}
.rightpibe{right:0;}
.leftpibe{left:0;}
Y voila! ya tenemos nuestro contenido dividido en dos partes y forzados a que cada uno vaya a su lugar.
[Leer Más]
Head
Body
Footer
Y que estos, por mas que se cambie el tamaño de la pantalla siempre estén bien ubicados.
El truco es el siguiente:
1-Añadimos el contenedor a nuestra web:
2-Luego desde nuestra hoja de estilo, llamamos a los diseños y le aplicamos los cambios:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}
Y voila!, ya tenemos nuestro contenido dinamico y formateado con DIV y CSS.
Tambien si queremos dividir el contenido con un div en dos partes, es decir si queremos ubicar algo a la izquierda de nuestra web y algo a la derecha, solo debemos añadir los siguientes datos:
Div principal:
Y luego el estilo:
.wrapperpibe{position:relative;}
.rightpibe,.left{width:10%; position:absolute;}
.rightpibe{right:0;}
.leftpibe{left:0;}
Y voila! ya tenemos nuestro contenido dividido en dos partes y forzados a que cada uno vaya a su lugar.
Bienvenid@s al blog de Giaccio Design
Hola!,
Debido a algunos problemas que he tenido con mi antiguo blog, he tenido que crear uno nuevo. La nueva dirección es giacciodesign.blogspot.com :)
Me dedico al diseño y desarrollo multimedia, ofreciendo los siguientes servicios:
Diseño y desarrollo de logotipos, fuentes personalizadas e imagen corporativa para empresas, fundaciones y particulares.
Diseño y programación de páginas web dinámicas y de contenido estático en HTML5, CSS3, PHP o ASP.NET
Programación en c# con integración de MYSQL, ORACLE y por supuesto MSSQL.
En este blog encontrarán información acerca de mis diseños, proyectos, trucos del diseñador, etc.
Gracias!.
[Leer Más]
Debido a algunos problemas que he tenido con mi antiguo blog, he tenido que crear uno nuevo. La nueva dirección es giacciodesign.blogspot.com :)
Me dedico al diseño y desarrollo multimedia, ofreciendo los siguientes servicios:
Diseño y desarrollo de logotipos, fuentes personalizadas e imagen corporativa para empresas, fundaciones y particulares.
Diseño y programación de páginas web dinámicas y de contenido estático en HTML5, CSS3, PHP o ASP.NET
Programación en c# con integración de MYSQL, ORACLE y por supuesto MSSQL.
En este blog encontrarán información acerca de mis diseños, proyectos, trucos del diseñador, etc.
Gracias!.