Calificación:
  • 1 voto(s) - 2 Media
  • 1
  • 2
  • 3
  • 4
  • 5
3 Trucos CSS
#1
Guiño 
Hola Amigos , Estoy Feliz! Porque Aprobaron Mi Cuenta En Skylium Gran sonrisa

Les traigo estos 3 trucos de css Lengua

1-Cambiar el color de la selección de texto

Cuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo en color azul, pero que pasa si quieres que esto sea diferente en tu web. Solo debes pegar esto en tu CSS:

Código PHP:
1
/* webkit, opera, IE9 */
2
::selection background:#555; color:#fff; }
3
/* mozilla firefox */
4
::-moz-selection background:#555; color #fff; } 

2-Rotar una imagen
Este Código CSS te permite rotar una imagen los grados que gustes:

Código PHP:
01
img 
{
02
transform
:
03
rotate
(45deg)
04
scale
(-11);
05
/* para firefox, safari, chrome, etc. */
06
-webkit-transform:
07
rotate
(45deg)
08
scale(-11);
09
-
moz-transform:
10
rotate
(45deg)
11
scale
(-11);
12
/* para ie */
13
filter
progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5mirror=1);
14
/* opera */
15
-o-transform:
16
rotate
(45deg)
17
scale
(-11);
18


Ultimo
3-Crear un efecto giratorio y de zoom en las imágenes
Con este código CSS puedes hacer que una imagen o un enlace gire 360 grados y tenga un efecto zoom hasta volver a la normalidad:

Código PHP:
01
@-webkit-keyframes rotater {
02
0
% { -webkit-transform:rotate(0scale(1) }
03
50
% { -webkit-transform:rotate(360degscale(2) }
04
100
% { -webkit-transform:rotate(720degscale(1) }
05
}
06
 
07
a
.advert    width:125pxheight:125pxdisplay:block; }
08
a.advert:hover {
09
/* safari / chrome */
10
-webkit-animation-name:rotater;
11
-webkit-animation-duration:500ms;
12
-webkit-animation-iteration-count:1;
13
-webkit-animation-timing-function: ease-out;
14
 
15
/* mozilla */
16
-moz-transform:rotate(360degscale(2);
17
-moz-transition-duration:500ms;
18
-moz-transition-timing-function: ease-out;
19
 
20
/* opera */
21
-o-transform:rotate(360degscale(2);
22
-o-transition-duration:500ms;
23
-p-transition-timing-function: ease-out;
24
 
25
/* ie */
26
-ms-transform:rotate(360degscale(2);
27
-ms-transform-duration:500ms;
28
-ms-transform-timing-function: ease-out;
29


Espero Les Haya Gustado , El que mas me gusto a mi es el 3
Comenta cual te gusto! Sonrisa
#2
Me parece muy interesante aunque no piense utilizarlo ya que por ahora va bien xD, sin embargo este tipo de detalles a futuro nos sirven demasiado para dar una mejor estilización a nuestros sitios Gran sonrisa
WWW
#3
Muy interesante, guardare estos codes a ver si los utilizo, buen aporte a la comunidadGuiño
WWW
#4
De Nada Amigo! jejejeje Gran sonrisa
#5
Cuando copies códigos de otros sitios deberías fijarte después en que es lo que pones, he visto que ahi están los números de las lineas sintaxis... Igual se agradece el aporte.
#6
Pon la fuente ... http://www.trazos-web.com/2011/10/10/19-...-para-css/
#7
Tremenda fuente !!!
creo que me quedaré un par de horas analizandolo.
gracias
#8
muy bueno, el tercero da el efecto que tiene el avatar de foro Gran sonrisa
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Trucos con CSS parte I JancoBH 2 617 13-03-2016, 01:00 AM
Último mensaje: JancoBH
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 662 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto
  Trucos Javascript canpios 4 566 30-01-2015, 06:17 AM
Último mensaje: garcon
  Desarrollo web para Ipad – Trucos que debes conocer TOMMYNRH 2 839 19-01-2013, 11:02 AM
Último mensaje: renzooo
  10 Trucos para la Protección y Seguridad en tu web Joomla! 2.5 TOMMYNRH 6 1,083 14-01-2013, 02:07 AM
Último mensaje: Hostingbir
Información 19 tips y trucos para CSS DarkMaster 13 1,943 31-07-2012, 09:16 PM
Último mensaje: pspero
  3 Trucos para el .htaccess Kevin9908 13 2,139 13-01-2012, 10:03 AM
Último mensaje: Masterval



Usuarios navegando en este tema: 1 invitado(s)