La entrada 200 íconos basados en CSS3 se publicó primero en SEO en tu Web.
]]>El uso de esta técnica tiene 3 grandes beneficios.
- Minimiza las solicitudes al servidor
- Permite que el diseño Web se lleve a cabo sin el uso de imágenes; del tipo JPG, PNG o GIF
- Son menos archivos, y menos KB que el servidor tiene que entregar al cliente.
Iconos basados en CSS3
El proyecto, que incluye 200 íconos está presentado de manera muy inteligente. Es necesario hacer click sobre el ícono que nos interesa y rápidamente es posible acceder a la siguiente información.
- miniatura de la imagen
- compatibilidad y número de versión menor en la cual el CSS se muestra adecuadamente
- declaraciones de CSS
- marcado estructurtal en HTML
CSS3 Icons
Los íconos basados en CSS3 evitan llamadas al servidor ya que se generan del lado del cliente
Es de rescatar y resalto la forma en que toda la información es presentada.
Se demuestra y hasta entusiasma el hecho de llevar a cabo este tipos de diseños.
Sitio Web | CSS3 Icons
—Gracias Sulaman por compartirme la novedad sobre este sitio Web
La entrada 200 íconos basados en CSS3 se publicó primero en SEO en tu Web.
]]>La entrada Como aplicar estilos CSS inmediatamente se publicó primero en SEO en tu Web.
]]>CSS Refresh es un pequeño script, no intrusivo, que se encarga de detectar modificaciones en el archivo CSS y actualizar en forma automática la página; muy útil, cuando se están llevando modificaciones «en línea», en tiempo de diseño.
[responsive]
[responsive]
Sólo es necesario instalar el archivo Javascript en la página Web o, de otra manera, utilizar el bookmarklet que el autor provee.
La nota importante, antes de la inclusión del script en la página, es que sólo los archivos CSS declarados antes de la inclusión del script serán tenidos en cuenta para el refresh.
Además, como CSS Refresh trabaja mediante XMLHttpRequest para determinar cambios en la fecha del archivo CSS; sólo trabajará con archivos alojados en el servidor; no en local.
Sitio Web | CSS Refresh
La entrada Como aplicar estilos CSS inmediatamente se publicó primero en SEO en tu Web.
]]>La entrada Bordes redondeados con CSS se publicó primero en SEO en tu Web.
]]>
Bordes redondeados con CSS
En mi ejemplo para un div 90, 5, 90, 5 la aplicación ha generado (ver imagen) la siguiente declaración en CSS:
-webkit-border-radius: 5px; -webkit-border-top-left-radius: 90px; -webkit-border-bottom-right-radius: 90px; -moz-border-radius: 5px; -moz-border-radius-topleft: 90px; -moz-border-radius-bottomright: 90px; border-radius: 5px; border-top-left-radius: 90px; border-bottom-right-radius: 90px;
Sitio Web | Border radius
La entrada Bordes redondeados con CSS se publicó primero en SEO en tu Web.
]]>La entrada Un generador de cintas en 3D se publicó primero en SEO en tu Web.
]]>Esto es, nombre de los selectores, opción del uso de sombras y colores; como así también las medidas correspondientes.
El resultado es el markup correspondiente y la hoja de estilos en CSS3. La compatibilidad es asegurada en todos los navegadores modernos.
Un generador de cintas en 3D
La aplicación Web ofrece 4 presets o modelos a partir del cual se puede generar cualquier prueba.
Sitio Web | 3D Ribbon Generator
Vía | Elephant Walk
La entrada Un generador de cintas en 3D se publicó primero en SEO en tu Web.
]]>La entrada Transformie | CSS Transforms para Internet Explorer se publicó primero en SEO en tu Web.
]]>
Transformie | CSS Transforms para Internet Explorer
Transformie es una librería de jQuery que pesa sólo 5 Kb y que al insertarse en cualquier página Web mapea los filtros nativos de Internet Explorer en verdaderas transformaciones de CSS3.
Transformie soporta las siguientes funciones de la sintaxis de Webkit:
- rotate
- scale, scaleX, scaleY
- skew, skewX, skewY
- matrix (con la excepción de los últimos 2 modificadores, tx y ty)
Sitio Web | Transformie
Licencia | Creative Commons
La entrada Transformie | CSS Transforms para Internet Explorer se publicó primero en SEO en tu Web.
]]>La entrada Texto 3D sólo con CSS se publicó primero en SEO en tu Web.
]]>
Texto 3D sólo con CSS
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
Vía | Mark Dotto
La entrada Texto 3D sólo con CSS se publicó primero en SEO en tu Web.
]]>La entrada Una hoja CSS reset con estilo | toucan-css-reset se publicó primero en SEO en tu Web.
]]>
/* TOUCAN CSS RESET | v0.1.8 */
/* General
---------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
}
p, blockquote, q, pre, address, hr, code, samp,
dl, ol, ul, form, table, fieldset, menu {
margin-bottom: 1.5em;
}
/* Structure
---------------------------------------- */
html {
font-size: 100%;
}
body {
font-family: georgia, palatino, "palatino linotype", times, "times new roman", serif;
/* font-family: arial, helvetica, sans-serif; */
font-size: .875em;
line-height: 1.5;
}
/* Text
---------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
margin-bottom: 10px;
}
h1 {
font-size: 3em;
line-height: 1.1;
}
h2 {
font-size: 2em;
line-height: 1.15;
}
h3 {
font-size: 1.5em;
line-height: 1.2;
}
h4 {
font-size: 1.25em;
line-height: 1.25;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 1em;
}
em, i {
font-style: italic;
}
strong, b {
font-weight: bold;
}
blockquote, q, cite {
font-style: italic;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
code, kbd, pre, samp, tt {
font-family: "andale mono", consolas, monaco, "lucida console", "courier new", courier, monospace;
line-height: 1.3;
}
pre {
/* word-wrap: break-word; */
white-space: pre-wrap;
}
abbr, acronym, dfn {
border-bottom: 1px dotted;
cursor: help;
font-variant: normal;
font-style: normal;
}
var {
font-style: normal;
}
center {
text-align: center;
}
/* Hypertext
---------------------------------------- */
/*
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
*/
a:focus {
outline: 1px dotted;
}
/* Image
---------------------------------------- */
img {
border: 0;
}
/* List
---------------------------------------- */
ul {
list-style: disc outside none;
}
ol {
list-style: decimal outside none;
}
li {
margin-left: 2em;
}
li ul, li ol {
margin-bottom: 0;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 1em;
}
/* Presentation
---------------------------------------- */
hr {
border: 0;
border-bottom: 1px solid;
}
big {
font-size: 1.25em;
}
small, sub, sup {
font-size: .85em;
}
sub, sup {
line-height: 1;
}
sub {
vertical-align: bottom;
}
sup {
vertical-align: top;
}
del, s, strike {
text-decoration: line-through;
}
ins {
text-decoration: none;
border-bottom: 1px dotted;
}
bdo {
border-bottom: 1px dotted;
}
u {
text-decoration: underline;
}
/* Form
---------------------------------------- */
fieldset {
padding: 1em;
}
legend {
font-weight: bold;
padding: 0 .25em;
}
input, textarea, select, button {
font-family: inherit;
font-size: 1em;
}
input[type=button], input[type=file], input[type=image], input[type=reset], input[type=submit],
button[type=button], button[type=reset], button[type=submit] {
cursor: pointer;
line-height: 1;
}
input[type=text], input[type=password], textarea {
padding: 1px;
}
textarea {
text-align: left;
line-height: 1.25;
}
/* Table
---------------------------------------- */
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
line-height: 1.3;
}
caption, th, td {
text-align: left;
vertical-align: top;
}
th, td {
padding: .5em 1em;
border: 1px solid;
}
caption {
padding-bottom: 1em;
}
th {
font-weight: bold;
}
Este framework es muy flexible, browser-friendly y el autor ofrece—además—una versión comprimida del archivos CSS.
Sitio Web | toucan-css-reset
La entrada Una hoja CSS reset con estilo | toucan-css-reset se publicó primero en SEO en tu Web.
]]>La entrada Como agregar comentarios a cualquier página Web con Instacomment se publicó primero en SEO en tu Web.
]]>
Como agregar comentarios a cualquier página Web con Instacomment
Luego, simplemente, hay que pegar el HTML provisto donde deseamos que aparezca la aplicación. El widget generado es servido vía AJAX.
Usando esta caja de comentarios, los visitantes pueden pueden crear y editar sus comentarios; los administradores pueden visualizar, editar y borrar comentarios, desactivar usuarios o direcciones IP.
Sitio Web | Instacomment
Vía | Makeuseof
La entrada Como agregar comentarios a cualquier página Web con Instacomment se publicó primero en SEO en tu Web.
]]>La entrada Un mejor CSS con Stylebot | Google Chrome se publicó primero en SEO en tu Web.
]]>Su uso es simple, hay que hacer click sobre el elemento deseado y cambiar luego las declaraciones para modificar la apariencia.
Sitio Web | Stylebot
La entrada Un mejor CSS con Stylebot | Google Chrome se publicó primero en SEO en tu Web.
]]>La entrada Como generar CSS3 online con CSS3 Maker se publicó primero en SEO en tu Web.
]]>Independientemente de permitir generar en forma interactiva las declaraciones correspondientes, la aplicación muestra la compatibilidad con cada uno de los principales navegadores.
Las posibilidades de investigar, practicar y obtener el CSS necesario, incluye:
- Border Radius
- Gradient
- CSS Transform
- CSS Animation
- CSS Transition
- Text Shadow
- Box Shadow
- Text Rotation
- @Font Face
Decididamente, una interesante herramienta para el diseño Web con el estándar que se viene.
Sitio Web | CSS3.0 Maker
La entrada Como generar CSS3 online con CSS3 Maker se publicó primero en SEO en tu Web.
]]>