AnshiG
Bienvenidos a AnshiG.!!

Conectarse

Recuperar mi contraseña


Afiliados Elite


Normales
Kimi wa Petto TOP
Pagerank

Últimos temas
» Blog de Renders!
Dom Ene 03, 2016 2:36 pm por Sakura92

» Hemos vuelto!!
Dom Ene 03, 2016 2:31 pm por Sakura92

» Actualización FEBRERO 2015
Vie Feb 27, 2015 10:22 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:42 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:41 am por Sakura92

» Materias favoritas... y no tanto!
Jue Feb 12, 2015 10:47 am por Sakura92

» Que mascotas tienen, tuvieron y les gustaria tener?
Jue Feb 12, 2015 10:38 am por Sakura92

» Redes sociales
Jue Feb 12, 2015 10:09 am por Sakura92

» PS3: Juegos!
Jue Feb 12, 2015 10:03 am por Sakura92

» Consolas o PC?
Jue Feb 12, 2015 9:55 am por Sakura92

» BUSQUEDA DE STAFF
Mar Feb 10, 2015 7:18 pm por Sakura92

» Requisitos y Datos
Mar Feb 10, 2015 12:03 pm por Sakura92

» Limpieza de afiliados
Mar Feb 10, 2015 9:36 am por Sakura92

» Ola ke Ase?
Lun Dic 09, 2013 8:07 pm por Tetsumi

» Guia 7: Reglamento Administracion
Vie Nov 22, 2013 1:05 pm por Sakura92

» Ideas
Vie Nov 22, 2013 1:02 pm por Sakura92

» Puntos
Vie Nov 22, 2013 12:59 pm por Sakura92

» Reglamento Soporte
Vie Nov 22, 2013 12:58 pm por Sakura92

» Reglamento Tutoriales
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Galerias
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Recursos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Reglamento Talleres y Pedidos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Incumplimientos
Vie Nov 22, 2013 12:52 pm por Sakura92

» Wings of Freedom [Elite]
Lun Sep 30, 2013 2:28 pm por Invitado

» Yugi Oh! RPG [Élite]
Miér Ago 07, 2013 2:36 am por Invitado

» OMEGA NEW WORLD [Afiliación Élite ]
Miér Jul 31, 2013 6:08 pm por Invitado

» Creando Mundos [Élite]
Vie Jul 26, 2013 12:22 am por Invitado

» World´s Inuyasha RPG [Normal]
Miér Jul 24, 2013 11:46 pm por Invitado

» Fatal Liberty Rol [Élite]
Mar Jul 16, 2013 10:30 am por Invitado

» Fairy Tail Sekai || Re-Apertura! || Afiliación Elite
Miér Jul 03, 2013 1:50 am por Invitado

» Hi(: !
Lun Jul 01, 2013 3:47 am por #Re Sound

» Hola, Hola, ¿hay alguien ahi?
Lun Jul 01, 2013 3:37 am por #Re Sound

» Bleach: Shadow Of Seireitei [Cambio de dirección]
Sáb Jun 29, 2013 11:52 am por Invitado

» Volvi... nose si para siempre pero volvi xD
Vie Jun 28, 2013 9:08 am por Sakura92

» Me extravié en el cielo, ¿qué puedo hacer?
Vie Jun 28, 2013 8:55 am por Sakura92

» Roma Antiqua {Afiliación Normal}
Dom Jun 23, 2013 3:07 pm por Invitado

» Saint Seiya Cosmos Rebellion Rol [Afiliación Élite]
Dom Jun 16, 2013 12:13 am por Invitado

» Buck Tick Fans [Élite]
Jue Jun 13, 2013 1:49 am por Invitado

» End of Silence [Cambio de dirección y botones]
Vie Mayo 31, 2013 5:54 am por Invitado

» Campamento mestizo [Afiliación Elite]
Miér Mayo 29, 2013 6:11 pm por Invitado

» Render Universe - Elite
Dom Mayo 19, 2013 3:58 pm por Invitado

» Love orange and cyan (tutorial9
Jue Mayo 16, 2013 3:51 pm por Loki

» AVISO
Jue Mayo 16, 2013 8:49 am por Sakura92

» Code Geass: Endless Dark [Élite]
Miér Mayo 01, 2013 2:22 am por Invitado

» Creative Designs (normal)
Mar Abr 30, 2013 12:48 am por Invitado

» Ultimate Inazuma Rol -Cambio de banner-
Jue Abr 25, 2013 1:26 pm por Invitado

» Buenas...
Mar Abr 16, 2013 3:58 pm por Naggar

» Actualizacion de Abril
Mar Abr 16, 2013 2:00 pm por Sakura92

» Texuras y Png hechas por mi (Sueltas) - Actu 13/04
Lun Abr 15, 2013 8:16 am por Jotaro Kujo

» AVISO DE AUSENCIA TEMPORAL
Vie Abr 12, 2013 2:46 pm por Zec



Las imagenes e historias que se posteen en este foro son de sus respectivos dueños, cada uno tendra el link correspondiente a la pagina donde lo ubico su creador originalmente.Todo el materia ya se encuentra bajo licencia por favor si quieres tomar algo comunicarse con la administración del foro, o el dueño del post.
Creative Commons License
Crear
foro
Codigos CSS-HTML-JS

APRENDO EN...
Estudio en Eternal Designs Melody Graphics School ise-graficos

TOMO RECURSOS DE...

RESEÑAS...


Simplificar CSS

Ver el tema anterior Ver el tema siguiente Ir abajo

Simplificar CSS

Mensaje por Sakura92 el Sáb Abr 06, 2013 7:06 pm

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE
¡Hola! Bueno, hoy aprenderemos cómo hacer que ese lio enorme de CSS que tenemos se haga más corto y simple. Principalmente veremos códigos que están desactualizados, compatibildades y otros detalles. Si se me pasa algo, ¡avisen! Por cierto, este tuto es válido al día de la fecha, cuando surjan más compatibilidades lo actualizaré... (:

1. Bordes.
Vale, haz puesto un bonito borde redondeado a tu foro o a una caja. Pero ¿CUANTOS códigos has usado? Antes que todo, debes saber que estos:

-moz-border-radius
-webkit-border-radius

¡YA PASARON DE MODA! Hoy día se puede usar sólo border-radius sin ningún problema de compatibilidad. Además, si quieres que todos los bordes tengan el mismo radio, basta con que lo coloques una vez:

border-radius: 15px 15px 15px 15px >> ¡propiedad poco feliz!
border radius: 15px; >> ¡propiedad feliz! ^^

Colocar cuatro valores es útil cuando uno de ellos es diferente, ya que cada uno referencia a una esquina del elemento (superior izquierda, sup. derecha, inf. derecha e inf. izquierda respectivamente) pero si tu objetivo es darle el mismo redondeado a todas las esquinas coloca un solo valor Wink


2. Backgrounds.
Si quieres colocar un fondo a algo, no hace falta que especifiques background-image, background-color, etc; ¡puedes colocarlo todo bajo el nombre background! La sintáxis completa de background es:

background: color posición tamaño repeat origen clip adjunto imagen;

Entonces por ejemplo puedes si quieres un fondo de imagen que no se repita puedes colocar:

background: no-repeat url('link de tu imagen');


3. Fonts.
Algo parecido a lo que sucede con los backgrounds sucede con las propiedades de la familia font. Se pueden agrupar así:

font: font-style font-variant font-weight font-size/line-height font-family;

Entonces por ejemplo podríamos tener:

font: italic small-caps 400 15px/30px Arial;


4. Padding, margin.
Algo parecido a lo que sucede con los bordes redondeados sucede con los paddings y márgenes, ya que no es necesario asignarles cuatro valores si los cuatro valores serán iguales:

padding: 10px 10px 10px 10px;
margin: 5px 5px 5px 5px;
>> códigos poco felices
padding: 10px;
margin:5px; >> códigos shuer felices :3


5. Códigos generales.
¿Tienes propiedades que deben ser aplicadas a la mayor parte de los elementos que hay en lo que sea que estés haciendo? ¡En ese caso no los repitas para cada div! Dale esas propiedades a un div que englobe todo, y modificá las propiedades de las cosas que son excepciones, no de la regla.
avatar
Sakura92
Webmaster
Webmaster

Mensajes : 175
Puntos : 178942
Reputación : 2
Edad : 25

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.