X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Acceso Premium gratis

Acceso a toda nuestra biblioteca de artículos Hub Premium, los archivos del proyecto y el primer 10% de cada uno-Video Tutorial de la Biblioteca Tutorial en línea .

Crea tu cuenta gratis!

Creado esquinas redondeadas en Objetos de diseño en CSS3
Traducido por Google Translate

Si usted no ha estado haciendo mucho leyendo todavía sobre lo que hay de nuevo en CSS3 , es bastante impresionante. Hay todo tipo de posibilidades de reciente introducción, incluyendo gradientes, varias columnas, las imágenes de fronteras, y un hablaremos un vistazo a este, el radio de la frontera. Radio de la frontera nos permite configurar las esquinas redondeadas de otro modo los objetos rectangulares en los diseños de nuestra web.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

Paso 1 - Aplicación de un Radio Frontera CSS3

En primer lugar, vamos a aplicar radio de frontera. En su hoja de estilo, encontrar la regla que desea aplicar el efecto de esquinas redondeadas para. A menudo, esto va a ser un selector ID que es el control de un elemento div. Asegúrese también de que usted también está aplicando un color de fondo o un borde (o ambos) para que pueda ver las esquinas!

A continuación, agregue el "radio de frontera", propiedad a su estado, seguido de un valor. Cuanto más alto sea el valor que se utilice, más la vuelta a la esquina.

Aquí, estoy solicitando el radio de la frontera a mi # Contenido selector ID, que es el control de la div que contiene el contenido de mi página, como se puede ver en la captura de pantalla incluidos. Asegúrese de guardar su trabajo y ver tu trabajo en tu navegador.

Si usted todavía está recibiendo las esquinas de 90 grados, entonces el navegador es uno que no es compatible con esta función. Sin embargo, no tienen necesidad de empacar las cosas en el momento. Vamos a ver que buen truco que he mencionado antes.

Paso 2 - Garantías de efecto esquina redondeada Obras

Como se mencionó, sólo las últimas versiones de los navegadores más populares de la propiedad CSS3 la frontera de radio. Entonces, ¿cómo se puede asegurar que el diseño funciona para los usuarios que siguen utilizando los navegadores que son una versión o detrás de los dos? Puede utilizar un código adicional, de la siguiente manera.

En primer lugar, vamos a añadir en "-moz-border-radius:" seguido por un valor de radio. Este objetivo lo que se conoce como navegadores Gecko - sobre todo de Firefox.

A continuación, vamos a añadir en "-webkit-border-radius:", seguido por el mismo valor que hemos utilizado anteriormente. Esto va a golpear a todos los navegadores basados ​​en WebKit, al igual que Chrome y Safari. Una vez añadido, salvar su trabajo y la actualización de su navegador.

Paso 3 - La excepción confirma la regla

Ahora ¿qué pasa con Internet Explorer, el navegador favorito de todos los diseñadores web (sic), te preguntarás? Bueno, todas las opciones anteriores no funcionan. De hecho, el código que hemos añadido a este punto serán ignorados por el Explorer, y las esquinas, simplemente se hacen en su defecto de 90 grados estilo, que es mejor que tener que romper, ¿no? Es posible que salga de las esquinas redondeadas en IE, pero sabemos que es un poco de trabajo extra, y tal vez eso es algo que podría conseguir en el futuro en una punta. Por el momento, sin embargo, disfrutar de sus esquinas redondeadas en todos los otros navegadores!

CSS es una maravilla. Descubra más sobre diseño flotante diseños de CSS .


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link