Categorias AlbertSuarez.com

css3

• 2014, css3

  input – fondo opacidad – placeholder color.

  05.05.14 | Permalink | Comment?

   .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

  12.08.12 | Permalink | Comment?

  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;
  

• 2012, css3

  Scrollbars con css3

  11.26.12 | Permalink | Comment?

  #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

  11.08.12 | Permalink | Comment?

  -o-transform: rotateZ(-20deg);
     -webkit-transform: rotateZ(-20deg);
      -moz-transform: rotateZ(-20deg);
  

• 2012, css3, diseño web, HTML5

  bootstrap html5 css3 front-end framework

  10.29.12 | Permalink | Comment?

  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

  10.10.12 | Permalink | Comment?

  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.

  @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

  09.16.12 | Permalink | Comment?

  
  Título contenido A
  

  @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;
  }
  
  
  
  

Albert Suarez | Webmaster