1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.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+ */ |
1 2 3 4 5 |
background: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; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#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; } |
1 2 3 |
-o-transform: rotateZ(-20deg); -webkit-transform: rotateZ(-20deg); -moz-transform: rotateZ(-20deg); |
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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@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».
1 |
<div id="texto">Título contenido A</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@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; } |