Discussion :

[lolo34140]

Bonjour,

Je suis entrain de réaliser un ribbon pour mettre par dessus des containers.

Cependant je rencontre un problème de mise en forme pour le centrage du texte présent dans le ribbon.
Sur google chrome tout est parfait (comme toujours) mais par contre sur IE ça décale le texte avec la présence d'un fond noir qui n'est pas présent dans le css en principe.

Voici le code html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="ribbon"><span class="ribbon-text">New</span></div>

Et le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.ribbon {
	position: absolute;
	z-index: 9999;
    width: 25px;
	height: 75px;
    margin: 0;
	top: 0px;
	right: 20px;
    background: rgb(97,205,245);
	opacity: 0.85;
    border-left: 1px dotted #FFF;
    border-right: 1px dotted #FFF;
    box-shadow: 3px 0 0 rgb(97,205,245),
                -3px 0 0 rgb(97,205,245);
	-moz-box-shadow: 3px 0 0 rgb(97,205,245),
               		 -3px 0 0 rgb(97,205,245);
	-webkit-box-shadow: 3px 0 0 rgb(97,205,245),
              		   -3px 0 0 rgb(97,205,245);
    -webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
}
.ribbon-text {
	position: relative;
	display: block;
	font-family: 'confortaa-light';
	font-size: 14px;
	font-weight: normal;
	color: #FFF;
	line-height: 75px;
	letter-spacing: 2px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
}
.ribbon:after,
.ribbon:before {
    border-top: 15px solid rgb(97,205,245);
    content: '';
    height: 0;
    position: absolute;
    top: 100%;
    width: 0;
}
.ribbon:after {
    border-left: 20px solid transparent;
    right: -4px;
}
.ribbon:before {
    border-right: 20px solid transparent;
    left: -4px;
}

Et la démo ici : http://fiddle.jshell.net/MRHjV/4/

En espérant que l'on puisse m'aider!

Merci d'avance!

EDIT: les ombres ne marchent pas non plus sur IE

[nicosmash]

Bonjour,

Pour ma part j'utilise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.align_center
{
	text-align: center;
}

Cordialement.

[lolo34140]

Merci. Mais un text-align: center; ne change rien.

EDIT: j'ai l'impression que tout le problème vient de la rotation sous IE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

[lolo34140]

Avec ce code la rotation du text est bonne maintenant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.ribbon {
	position: absolute;
	z-index: 9999;
    width: 25px;
	height: 75px;
    margin: 0;
	top: 0px;
	left: 20px;
    background: rgb(97,205,245);
	opacity: 0.85;
    border-left: 1px dotted #FFF;
    border-right: 1px dotted #FFF;
    box-shadow: 3px 0 0 rgb(97,205,245),
                -3px 0 0 rgb(97,205,245);
	-moz-box-shadow: 3px 0 0 rgb(97,205,245),
               		 -3px 0 0 rgb(97,205,245);
	-webkit-box-shadow: 3px 0 0 rgb(97,205,245),
              		   -3px 0 0 rgb(97,205,245);
    -webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
}
.ribbon-text {
	position: relative;
	display: block;
	font-family: 'confortaa-light';
	font-size: 14px;
	font-weight: normal;
	color: #FFF;
	line-height: 75px;
	letter-spacing: 2px;
	-webkit-transform: rotate(-90deg);	
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
}
.ribbon:after,
.ribbon:before {
    border-top: 15px solid rgb(97,205,245);
    content: '';
    height: 0;
    position: absolute;
    top: 100%;
    width: 0;
}
.ribbon:after {
    border-left: 20px solid transparent;
    right: -4px;
}
.ribbon:before {
    border-right: 20px solid transparent;
    left: -4px;
}

Demo : http://fiddle.jshell.net/MRHjV/5/

par contre j'ai toujours pas d'ombre sous IE...

[nicosmash]

Essayer juste d'afficher un :

Hello world

avec de l'ombre voir si IE le prend en compte.
J'avais des soucis identiques avec les bords arrondis

Vous pouvez essayer avec quelques choses comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
p
{
    text-shadow: 2px 2px 4px black;
}
...
p
{
    box-shadow: 6px 6px 6px black inset;
}

[lolo34140]

Merci mais ça n'a pas de rapport avec le box-shadow.
Il s'agit d'un problème sous IE avec le filter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
filter: 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=10);

En ajoutant un outline à la place du box-shadow pour la deuxième bordure, je n'arrive pas à appliquer un ombrage correct sous IE. L'ombrage sous IE via filter me supprime les deux triangles du bas...

Exemple sans box-shadow avec le outline: http://fiddle.jshell.net/MRHjV/9/

Tant pis les utilisateurs d'IE n'auront pas de shadows!

Merci pour l'aide en tout cas!