Soft Edges utilisant CSS?

J'utilise RGBA pour créer un arrière-plan transparent qui se superpose à une image. Fonctionne très bien. Mes questions sont les suivantes: Y at-il un moyen de "ramollir" les bords de la boîte à l'endroit où elle coule plus dans l'image par rapport à un bord dur.Soft Edges utilisant CSS?

Voici mon CSS pour la boîte:

#past{ 
    position:absolute; 
    left:0; 
    top:363px; 
    background-color: rgba(34,34,34,0.6); 
    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222); 
    /* For IE 8*/ 
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222); 
    z-index:10; 
    padding:10px; 
}

Je sais que je peux le faire en créant une image de fond dans Photoshop, mais je cherchais un seul moyen CSS vs en utilisant une image.

Aussi je préférerais si possible pour que cela fonctionne dans tous les navigateurs.

Merci pour l'aide. =>

Source

2011-08-06 L84

est cassé. – Mick

Une autre option consiste à utiliser un de mes outils CSS préférés: box-shadow.

Une ombre de boîte est vraiment une ombre portée sur le noeud. Il ressemble à ceci:

-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5); 
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5); 
box-shadow: 1px 2px 3px rgba(0,0,0,.5);

Les arguments sont les suivants:

1px: Horizontal offset of the effect. Positive numbers shift it right, negative left. 
2px: Vertical offset of the effect. Positive numbers shift it down, negative up. 
3px: The blur effect. 0 means no blur. 
color: The color of the shadow.

Ainsi, vous pouvez laisser votre conception actuelle, et ajouter une boîte ombre comme:

box-shadow: 0px -2px 2px rgba(34,34,34,0.6);

Cela devrait donner vous avez un bord supérieur «flou».

Ce site vous aidera avec plus d'informations: http://css-tricks.com/snippets/css/css-box-shadow/

Source

2011-08-06 05:23:00 OverZealous

Ceci est une grande explication de «boîte-ombre» vers laquelle je vais continuer à revenir! Convient bien à mon style d'apprentissage. – Thomas

S'il vous plaît ne pas lier à w3schools, plutôt lien vers mdn https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow – surfer190

Vous pouvez utiliser gradient CSS - même si il ne sont pas compatibles entre les différents navigateurs et vous auriez à coder pour chaque

Comme ça: CSS3 Transparency + Gradient

dégradé devrait être plus transparent sur le dessus ou sur coin supérieur droit (selon les capacités)

Source

2011-08-06 04:52:19

Looks Intéressant ... Je vais devoir en découdre et voir ce que je reçois. – L84

Cela dépend de quel type vous fading recherchez.

Mais avec l'ombre et les coins arrondis, vous pouvez obtenir un bon résultat. Coins arrondis car plus l'ombre est grande, plus le bordé est arrondi, à moins que vous ne l'équilibriez avec des coins arrondis.

http://jsfiddle.net/tLu7u/

aussi .. http://css3pie.com/

lien

Source

2011-08-06 05:27:30 Joonas

Soft Edges utilisant CSS?

Répondre

Questions connexes