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 585 13-03-2016, 01:00 AM
Último mensaje: JancoBH
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 612 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto
  Trucos Javascript canpios 4 536 30-01-2015, 06:17 AM
Último mensaje: garcon
  Desarrollo web para Ipad – Trucos que debes conocer TOMMYNRH 2 769 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,043 14-01-2013, 02:07 AM
Último mensaje: Hostingbir
Información 19 tips y trucos para CSS DarkMaster 13 1,847 31-07-2012, 09:16 PM
Último mensaje: pspero
  3 Trucos para el .htaccess Kevin9908 13 2,081 13-01-2012, 10:03 AM
Último mensaje: Masterval



Usuarios navegando en este tema: 1 invitado(s)