Categorias AlbertSuarez.com
css3
-
2014, css3
input – fondo opacidad – placeholder color.
12345678910111213141516171819202122232425.input{background: rgba(0,0,0,0.1);border: 2px solid #E84C3D;border-radius: 3px;font-size: 15px;height: 45px;outline: medium none;padding: 5px;width: 90%;color: white !important;}input.input::-webkit-input-placeholder {color: white !important;}input.input::-moz-placeholder {color: white !important;opacity: 1;}input.input:-moz-placeholder {color: white !important;opacity: 1;}input.input::-ms-input-placeholder {color: white !important;} /* IE10+ */ -
2012, css3
Fondo Web Background – resize . css3
12345background:url(url) no-repeat center center fixed;-webkit-background-size:cover; /* navegadores basados en webkit */-moz-background-size:cover; /* Mozilla Firefox */-o-background-size:cover; /* Opera */background-size:cover; -
2012, css3
Scrollbars con css3
1234567891011121314151617181920212223#scrollbars{width: 780px;height:400px;overflow:auto;overflow-x:hidden ; }::-webkit-scrollbar {width: 10px;height: 10px;}::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {display: none;}::-webkit-scrollbar-track-piece {background-color: #3b3b3b;-webkit-border-radius: 6px;}::-webkit-scrollbar-thumb:vertical {-webkit-border-radius: 6px;background: #666 no-repeat center;} -
css3
Rotar, inclinar elementos con CSS3
123-o-transform: rotateZ(-20deg);-webkit-transform: rotateZ(-20deg);-moz-transform: rotateZ(-20deg); -
2012, css3, diseño web, HTML5
bootstrap html5 css3 front-end framework
Llevo unos días buscando un framework de html5 y css. Cual fue mi sorpresa cuando el sábado un amigo me comento el framework bootstrap. No lo he probado mucho, pero promete bastante. A lo largo de la siguiente semana estaré haciendo unas prácticas. Inténtare colgar algo.
bootstrap
Aquí les dejo la url:
http://twitter.github.com/bootstrap/ -
2012, css3, HTML5
html5 css3 fuentes para todos los navegadores
Cada vez mas los navegadores son mas compatibles y nos dejan jugar un poco mas. En este caso no había aprovechado hasta ahora esta característica de css3, hasta esta tarde. Con esta regla de css3,font-face.com, puedes colocar las rutas de las fuentes. Para pasar a todos estos formatos la fuente tienes recursos como esta web: http://www.fontsquirrel.com/fontface/generator.
1234567891011121314151617@font-face { font-family:'canarias';src:url('../css/font/sketch_block.eot');src:url('../css/font/sketch_block.eot?#iefix') format('eot'),url('../css/font/sketch_block.woff') format('woff'),url('../css/font/sketch_block.ttf') format('truetype'),url('../css/font/sketch_block.svg#id') format('svg');font-weight:normal; font-style:normal;#texto{font-family:'canarias', Arial, Verdana, sans-serif;color:white;font-size:55px;}Cito estos consejos de cristalab.com, la primera en particular me hace mucha gracia:
.eot siempre debe ir de primeras y siempre debe ir dos veces. Porque Internet Explorer 6, 7 y 8 son como un ex psicopata. Siempre quiere que le pongas de primeras ante el resto.
También recuerda que puedes agregar tantos @font-face como quieras. Simplemente declaras otro bloque @font-face y le pones otro font-family. Ya está.
Las fuentes SVG tienen un ID que debe ir frente a ellas con el signo #. Lo consigues abriendo el .svg con cualquier editor de texto y buscando el atributo “id”.
-
2012, css3
Texto animado con CSS3
1<div id="texto">Título contenido A</div>123456789101112131415161718@charset "utf-8";/* CSS Document *//*/////////////Fotograma Clave////*/@-webkit-keyframes texto {0% { opacity: 0; }50% { opacity: 0.50; }100% { opacity: 0; }}#texto_rotativo {-webkit-animation-name: texto;-webkit-animation-duration: 6s;-webkit-animation-iteration-count: infinite;width: 100px;position: relative;padding: 2px;}
