I am trying to use Chris Coyier's CSS to put corner-ribbons on my divs..
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font-size: 10px;
font-weight:bold;
color: #111;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 3px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
The problem is that, when small and rotated, the text seems to break.
Here's the Fiddle :
http://jsfiddle.net/H6rQ6/8728/
If its not breaking in your browser, here's a snapshot of what i am facing :
you can try force browser to refresh/recalculate layout of text playing with font-style:
http://jsfiddle.net/H6rQ6/8730/
.ribbon-green {
font-weight: bold ;
font-size:12px;
font-family:Sans-Serif;
color: #111;
font-variant: small-caps;
font-size:120%; /* other rules */
}
edit, actually, it just have to do with font being too small to render smoothly.
regards
I resolved this problem, thanks to showdev, by using
-webkit-transform: rotate(45deg) translate3d( 0, 0, 0);
That's because fonts are antialiased by default in chrome, and using translated3d(0,0,0) smoothens them.
More here : Wonky text anti-aliasing when rotating with webkit-transform in Chrome
That's completely a browser bug. You can't really avoid it.
Related
Here is a shadow:
So I need this to be a shadow which appears on button hover. I know its css but I didn't manage to make any blur:
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
border-radius: 100px;
filter: blur(5px);
So, two basic questions:
Is it possible to make this blurred thing with CSS?
If yes, is it possible to make it a button shadow? Or how else can I solve this? One thought was to just make a png with absolute positioning, which is hacky a bit
update
So the final result I want achieve looks something like this:
The shadow repeats button gradient which is
linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
New answer
I have made an online generator that helps you get a gradient shadow easily: https://css-generators.com/gradient-shadows/
All you have to do is to adjust a few values and get the code:
button {
margin: 50px;
border-radius: 999px;
padding: 10px 30px;
font-size: 25px;
color: #fff;
text-align: center;
line-height: 50px;
border: none;
background: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
position: relative;
transform-style: preserve-3d;
}
button::before {
content: "";
position: absolute;
inset: -10px;
background: inherit;
filter: blur(20px);
transform: translate3d(15px,15px,-1px);
border-radius: inherit;
pointer-events: none;
}
<button >
this a button
</button>
More detail: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
Old answer
What about multiple box-shadow:
.box {
margin:50px;
width:100px;
height:50px;
border-radius:20px;
color:#fff;
text-align:center;
line-height:50px;
box-shadow:
20px 5px 40px #CF77F3,
0px 5px 40px #009BFF,
-20px 5px 40px #2AC9DB;
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
}
<div class="box">
this a button
</div>
You can get this effect in modern browsers using a pseudo element with the same background, and a filter blur applied on it.
To get compatibility with IE, you can set also a pseudo, and to get the blurred borders use an inset shadow. At least in Chrome, there is a small left over of the border that still can be seen.
.test {
margin: 20px;
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);;
border-radius: 50px;
display: inline-block;
height: 100px;
width: 200px;
position: relative;
border: solid 4px black;
}
#test1:after {
content: "";
position: absolute;
background-image: inherit;
border-radius: inherit;
width: inherit;
height: inherit;
transform: translate(0px, 20px) scale(1.1);
z-index: -1;
filter: blur(14px);
}
#test2:after {
content: "";
position: absolute;
border-radius: 90px;
width: 250px;
height: 150px;
z-index: -1;
top: 1px;
left: -25px;
background-image: linear-gradient(-90deg, #CF77F3 0%, #009BFF 47%, #2AC9DB 100%);
box-shadow: inset 0px 0px 25px 18px white;
}
<div class="test" id="test1">
</div>
<div class="test" id="test2">
</div>
I know there are a lot of examples for customizing the tooltip of an html element but I can't make it working.
I have a simple anchor that looks like the following:
?
And then I created the following css style (I copied from an example):
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #1111ee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #11eeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
As you can see in the fiddle I created, the result is not what I expect.
So, what do I have to change?
https://jsfiddle.net/Bonomi/36kp45e2/1/
Just make the positioning of the a tag relative
a[title] {
position: relative;
}
That way your tooltip will now be absolute to the anchor tag, not to the document.
Updated fiddle:
https://jsfiddle.net/36kp45e2/2/
I'm in trouble trying to do this :
I managed to do something like this :
display: table-cell;
vertical-align: middle;
background: rgb(245,245,245); /* Old browsers */
background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
for the main container of text, and :
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 40px solid #FEEDDD;
display: inline-block;
to do the triangle. I would then place the circle with the number in absolute position inside of it.
But can't figure out how I would do for the triangle "border" to be gradient like the other div, nor giving it a white outer border...
Thanks ahead !
It's definitely possible.
I created not so long ago a back button with a gradient arrow. See this fiddle
So just change the orientation, the colors and resize it to what you want but you've got the idea here I guess.
HTML:
<button>Rejoignez le groupe</button>
CSS:
button {
position: relative;
display: inline-block;
border: 1px solid #555555;
margin: 0;
font-size: 12px;
color: inherit;
cursor: pointer;
height: 30px;
padding: 0 10px;
margin-right: 10px;
font-weight: bold;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #888888));
background: -webkit-linear-gradient(top, #eeeeee, #888888);
background: -moz-linear-gradient(top, #eeeeee, #888888);
background: -o-linear-gradient(top, #eeeeee, #888888);
background: linear-gradient(top, #eeeeee, #888888);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
}
button:after {
clip: rect(14px, 14px, 28px, 1px);
-webkit-transform: skewX(-35deg);
-moz-transform: skewX(-35deg);
-ms-transform: skewX(-35deg);
-o-transform: skewX(-35deg);
transform: skewX(-35deg);
content: "";
top: 0;
position: absolute;
height: 100%;
width: 8%;
right: -10px;
border-right: inherit;
background: inherit;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
box-shadow: inherit;
}
button:before{
clip: rect(1px, 14px, 14px, 1px);
background: red;
-webkit-transform: skewX(35deg);
-moz-transform: skewX(35deg);
-ms-transform: skewX(35deg);
-o-transform: skewX(35deg);
transform: skewX(35deg);
content: "";
top: 0;
position: absolute;
height: 100%;
width: 8%;
right: -10px;
border-right: inherit;
background: inherit;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
box-shadow: inherit;
}
Tell me if it's too confusing and need some guidance to change orientation, size and colors.
while you probably can manage to do something like that and still maintain a decent fall-backs across the ranges of browsers with successful results... i expect your going to pull out a good chunk of your hair while trying. my suggestion would be to get a few background images made up in Photoshop and break those items up into three different elements
an element for the transparent white circle that can contain the
step #
an element with class for the completed steps to apply the orange gradient background
another element with separate class for the gray gradient
doing things this way you can keep all of your elements "square" without having to worry about support for triangular or circle elements. and just overlay your text in the appropriate places...
i know this might not be exactly what your asking for the css3 way to accomplish everything, but i believe doing things this way allows you to keep it simple & lean
I am following this tutorial to create CSS 3 button with Icon. But the problem in this tutorial Icon height depends on font-size. If I increase font-size of text, icon fits well but if I try to reduce the font-size, it doesn't fit well.Image I am using is 40x30
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 5px 5px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 38px;
font-size: 15px;
font-weight: bold;
}
a.button:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}
a.button:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
display: block;
background: url(../img/gmail2.png) no-repeat;
}
Your statement is a little ambiguous and lacks a question, but I'll take a stab.
In this scenario, font-size will always play a small factor, as it will determine the height of the icon. At some point you are going to need to know some details about the button size, but it doesn't have to be affected by font. If you set the button height and the img{ height:100%; } the image will scale to fit the area.
<div id="container">
<h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>
combined with
#container{
border: 2px solid black;
width: 200px;
height: 20px;
}
#container img{
height:100%;
}
Should get you something you close to what you're looking for. I've whipped up a small jsfiddle to demonstrate one way to accomplish this.
It would be helpful if you could share your code.
In the css3 buttons examples of the link you provided, if I decrease font-size and set the following CSS style, works.
span { display: block; }
span is the tag that wraps the text inside the buttons.
I'm following the example posted here for making custom css tooltips.
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 99;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
I am wondering if there is a way to not have the tooltip push out it's parent elements outline in FireFox, it seems to work fine in Chrome
div {
display: inline-block;
padding: 20px;
border: 2px solid #000;
outline: 2px solid #F00;
}
see example here
I don't see how you can possibly fix this. I wonder if this is a Firefox bug?
The only thing that comes to mind is to use box-shadow instead of outline:
http://jsfiddle.net/thirtydot/HgeVh/9/
This has the downside that you're losing the outline in IE8, if that matters.