La création de gradient de lignes dans le CSS

Question, si je voulais créer des lignes de gradient fondu au noir sur le haut et le bas, comme sur les lignes de vu sur AT&T du menu déroulant qui séparent les éléments de menu, comment pourrais-je aller à ce sujet? Je veux créer un effet similaire sur un menu que je suis de codage, et je préfère ne pas utiliser d'images. Est-il un moyen de réaliser cet objectif dans le CSS? Aide appréciée! Merci.

  • Pourriez-vous poster un lien ou une image?
  • pouvez-vous nous montrer votre code html , finalement, ce que vous avez déjà commencé , nous voyons donc où vous obtenez coincé
InformationsquelleAutor KateG | 2013-06-20
  1. 3

    Microsoft CSS Gradient est une interface graphique, vous pouvez utiliser. il suffit de copier le CSS dans votre code:

    Exemple:

    #div {
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #FFFFFF 0%, #00A3EF 100%);
}
    InformationsquelleAutor Derek Story
  2. 1

    Vous pouvez créer un div avec 1px de largeur puis attribuez-lui un dégradé. Comme ça :

    .line{
width:1px;
height : 25px;
margin : 0 5px;
background: rgb(125,185,232);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(125,185,232,1) 0%, rgba(30,87,153,1) 50%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(50%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -o-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -ms-linear-gradient(top,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom,  rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 );
}

    Violon : http://jsfiddle.net/jPnXz/

    Ici un CSS gradient generator (je l'ai utilisé pour le CSS) : http://www.colorzilla.com/gradient-editor/

    InformationsquelleAutor Karl-André Gagnon
  4. 0

    Vous avez le répéter-gradient pour cela :

    http://codepen.io/anon/pen/zbLkl 

      background:repeating-linear-gradient(
top , 
white 0, 
white 1em,
turquoise 1em,
turquoise  1.2em) 0  2.4em;
line-height:1.2em;

    Égale la hauteur de la ligne de gradient , donc gradient de suivre une taille de police.

    le temps de creuser, un vieil exemple avec des carrés. et de fond de taille.http://dabblet.com/gist/4750827 

    background:
linear-gradient(0deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent),
linear-gradient(90deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent);
background-size:1.4em 1.4em,1.4em 1.4em;
line-height:1.4em;
    InformationsquelleAutor G-Cyr
  5. 0

    HTML:

    <!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px; 
background: linear-gradient(to top left ,#FFA500, #DDA0DD,#FFFAF0,#bfff00,#00ffff,#A9A9A9);
}
</style>
</head>
<body>
<h1>Linear Gradient</h1>
<div id="grad1"></div>
<br/>
<div>Internet Explorer 9 and earlier versions do not support gradients</div>
</body>
</html>

    InformationsquelleAutor sakthi sudhan