1. Inicio
  2. Informática
  3. Programación
  4. Web
  5. [CSS3] Bordes redondeados , Sombras etc.

[CSS3] Bordes redondeados , Sombras etc.

Topic created · 6 Mensajes · 1608 Visitas

  • bueno en este post os voi a enseñar algo ke me gusta muchisimo xD CS3 el cual consiste mas ke nada en decorar por lo ke yo se xd

    antes de empesar:

    Webkit : Google Chroome y safari
    el nombre sin nada adelante : es para Internet Explored
    Moz : Mozila Firefox
    o : Opera

    1-bordes redondeados a una div:

    primero hacemos una div a la que le queremos aplicar el css por ejemplo:

    hola xd

    ah esta Div le ponemos una capa CSS ejemplo:

    #uj {
    width: 700px
    height: 100px
    border-radius: 5px ------------> esto dara un borde de 5 px si quieren hacerlo mas personalisado colocan las 4 medidas
    -webkit-border-radius: 5px
    -moz-border-radius: 5px -------------> ay ke repetir el codigo 4 veses para los distintos navegadores
    -o-border-radius: 5px

    PD : Este codigo CS3 sirve para :
    Mozilla firefox 3.5
    Internet Explored 9
    Safari 3.0
    Opera 10.5
    Google Chroome 4.1

    2- texto con sombra

    lla habia un tuto de esta propiedad de Axav
    bueno igual se puede hacer un texto brillantes xd

    hola xd

    en la hoja de css:

    #uj
    height: 700px;
    width: 100px;
    Text-shadow: 0px 0px 5px #ffffff; -----------> tienen ke ser colores asi aaaa aaa aaa
    -webkit-Text-shadow: 0px 0px 5px #ffffff;
    -moz-Text-shadow: 0px 0px 5px #ffffff;
    -o-Text-shadow: 0px 0px 5px #ffffff;

    PD : Este codigo CS3 sirve para :
    Mozilla firefox 3.5
    Safari 3.0
    Opera 9.5
    Google Chroome 4.0

    3- degradado a una div!

    esto igual me gusta mucho xddddddddddddddddddd

    hola xd

    en la hoja css:

    #uj {
    width: 700px;
    height: 100px;
    background: -moz-linear-gradient(top, #0033FF , #00ccFF);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#00ccff), to(#0033ff));
    }

    ese degradado es de extremo ah extremo , el primer color ke sale es el de arriba y el ke sige es abajo
    tambien puede ser degradado al centro

    background: -moz-radial-gradient(top, #0033FF , #00ccFF);
    background: -webkit-gradient(radial, 0 0, 0 100%, from(#00ccff), to(#0033ff));

    PD : Este codigo CS3 sirve para :
    Mozilla firefox 3.5 mmm no esto seguro si para mozilla sirve
    Safari 3.0
    Google Chroome 4.0

    4- Rotar Div

    me saltare la parte eso de la div... y voi directo al css:

    #uj {
    width: 700px;
    heigth: 100px;
    background: #ffffff;
    -webkit-transform: rotate(10deg) ;
    -moz-transform: rotate(10deg) ;
    -o-transform: rotate(10deg) ;
    }

    modificando los entreparentesis se modifica la rotacion

    PD : Este codigo CS3 sirve para :
    Mozilla firefox 3.5
    Safari 3.1
    Opera 10.5
    Google Chroome 4.0

    5- div con sombra

    esto es para hacer la div con una sombra es casi igual ke el texto me salto al css:

    width: 700px;
    height: 100px;
    background: #ffffff;
    -moz-box-shadow:10px 10px 5px #000000;
    -webkit-box-shadow:10px 10px 5px #000000;
    box-shadow:10px 10px 5px #000000;

    PD : Este codigo CS3 sirve para :
    Mozilla firefox 3.5
    Internet Explored 9
    Safari 3.0
    Opera 10.5
    Google Chroome 4.0

    bueno tambien se pueden hacer animaciones igual ke el flash pero ese codigo todavia no me lo aprendo ... y no se bien su funcionamiento ay les dejo algo de cs3 saludos.

    0

  • convendría que corrigieses los "CS3" por "CSS3" para evitar confusión. CSS es el lenguaje, 3 es la versión. CS3 será en todo caso "Counter Strike 3" si es que existe q no tengo ni idea _xD_

    quería comentar una cosa, creo que esta propiedad:
    -o-border-radius: 5px
    deduzco que es para Opera, creo que no es necesario especificar "-o". Esta otra propiedad:
    border-radius: 5px
    también es interpretada por Opera, y seguramente con el paso del tiempo será la que se use para todos los navegadores. O eso espero, porque poner 3 veces lo mismo es un auténtico asco.

    En cualquier caso, la propiedad: border-radius: 5px sirve para Opera y servirá para más navegadores, así que como no se pierde nada usándola en lugar de la otra, recomiendo que se utilice.

    PD: si tengo un rato publico ejemplos de lo que acabas de poner, aquí mismo para que la gente vea los efectos directamente.

    0

  • Para ver ejemplos se pueden meter en w3schools. Está todo muy bien explicado y con ejemplos que puedes cambiar tú mismo y ver el resultado. El único problema que pueden tener algunos es que está en inglés.

    0

  • http://www.css3maker.com/ esta esta mejor xd y puedes traducila con google pa ke se vea en español xd

    0

  • salvatore la funcion -o- se supone que es una funcion nueva que empesara ah servir para opero o algo asi lei por ay xd

    pero si funciona con border-radius solamente perfecto xd

    y en mi web http://www.pipexdesign.lahit.net estoy provando los codigos para ke lo vea la gente

    me falta probar el de transition que no se por que no me funciona xd

    0

  • En w3schools tienes una lista de los navegadores que soportan cada propiedad CSS.

    0
Accede para responder