Rectangle 27 1

This is something I've come across recently. The baseline on the fonts I was using for some reason did not line up, so I aligned to the bottom and increased the line height instead of adding padding.

This is how I solved my issue, if you have a link to a code pen I can check if it will work for you, or if another solution would be better.

p {

    vertical-align: text-bottom;
    line-height: 1.5;

}

I've tried but that didn't change anything, I can't really put a codepen up as this font is protected

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 191

CSS3 triangles with transform rotate

Triangular shape is pretty easy to make using this technique. For people who prefer to see an animation explaining how this technique works here it is :

Otherwise, here is detailed explanation in 4 acts (this is not a tragedy) of how to make an isosceles right-angled triangle with one element.

<div class="tr"></div>

Easy, just make sure that width = 1.41 x height. You may use any techinque (see here) including the use of percentages and padding-bottom to maintain the aspect ratio and make a responsive triangle. In the following image, the div has a golden yellow border.

In that div, insert a pseudo element and give it 100% width and height of parent. The pseudo element has a blue background in the following image.

First, most important : define a transform origin. The default origin is in the center of the pseudo element and we need it at the bottom left. By adding this CSS to the pseudo element :

transform-origin:0 100%;
transform-origin: left bottom;

Now we can rotate the pseudo element 45 degrees clockwise with transform : rotate(45deg);

At this point, we have this CSS :

To hide the unwanted parts of the pseudo element (everything that overflows the div with the yellow border) you just need to set overflow:hidden; on the container. after removing the yellow border, you get... a TRIANGLE! :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

As shown in the demo, you can customize the triangles :

  • Make them thinner or flatter by playing with skewX().
  • Make them point left, right or any other direction by playing with the transform orign and rotation direction.
  • Much more... Unleash the powers of CSS3!
  • Triangle can easily be responsive.
  • You can maintain the boundaries of the triangle. This means that you can trigger the hover state or click event only when the cursor is inside the triangle. This can become very handy in some situations like this one where each triangle can't overlay it's neighbours so each triangle has it's own hover state.
  • The main drawback is the browser compatibility, the 2d transform properties are supported by IE9+ and therefore you can't use this technique if you plan on supporting IE8. See CanIuse for more info. For some fancy effects using 3d transforms like the reflection browser support is IE10+ (see canIuse for more info).
  • You don't need anything responsive and a plain triangle is fine for you then you should go for the border technique explained here : better browser compatibility and easier to understand thanks to the amaizing posts here.

It's probably worth mentioning that the 1.41 is an approximation of 2 and the length of the hypotenuse of the triangle that you create, which is why you need (at least) that width.

Actually, in trying to use this, a mention of how the different widths for use with skewX were derived would be useful.

This method works better when you need 1px solid border for the triangle.

Wow for that animated graphic. A true example of a picture can say a 1000 words!

css3 - How do CSS triangles work? - Stack Overflow

css css3 geometry polygon css-shapes
Rectangle 27 188

CSS3 triangles with transform rotate

Triangular shape is pretty easy to make using this technique. For people who prefer to see an animation explaining how this technique works here it is :

Otherwise, here is detailed explanation in 4 acts (this is not a tragedy) of how to make an isosceles right-angled triangle with one element.

<div class="tr"></div>

Easy, just make sure that width = 1.41 x height. You may use any techinque (see here) including the use of percentages and padding-bottom to maintain the aspect ratio and make a responsive triangle. In the following image, the div has a golden yellow border.

In that div, insert a pseudo element and give it 100% width and height of parent. The pseudo element has a blue background in the following image.

First, most important : define a transform origin. The default origin is in the center of the pseudo element and we need it at the bottom left. By adding this CSS to the pseudo element :

transform-origin:0 100%;
transform-origin: left bottom;

Now we can rotate the pseudo element 45 degrees clockwise with transform : rotate(45deg);

At this point, we have this CSS :

To hide the unwanted parts of the pseudo element (everything that overflows the div with the yellow border) you just need to set overflow:hidden; on the container. after removing the yellow border, you get... a TRIANGLE! :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

As shown in the demo, you can customize the triangles :

  • Make them thinner or flatter by playing with skewX().
  • Make them point left, right or any other direction by playing with the transform orign and rotation direction.
  • Much more... Unleash the powers of CSS3!
  • Triangle can easily be responsive.
  • You can maintain the boundaries of the triangle. This means that you can trigger the hover state or click event only when the cursor is inside the triangle. This can become very handy in some situations like this one where each triangle can't overlay it's neighbours so each triangle has it's own hover state.
  • The main drawback is the browser compatibility, the 2d transform properties are supported by IE9+ and therefore you can't use this technique if you plan on supporting IE8. See CanIuse for more info. For some fancy effects using 3d transforms like the reflection browser support is IE10+ (see canIuse for more info).
  • You don't need anything responsive and a plain triangle is fine for you then you should go for the border technique explained here : better browser compatibility and easier to understand thanks to the amaizing posts here.

It's probably worth mentioning that the 1.41 is an approximation of 2 and the length of the hypotenuse of the triangle that you create, which is why you need (at least) that width.

Actually, in trying to use this, a mention of how the different widths for use with skewX were derived would be useful.

This method works better when you need 1px solid border for the triangle.

Wow for that animated graphic. A true example of a picture can say a 1000 words!

css3 - How do CSS triangles work? - Stack Overflow

css css3 geometry polygon css-shapes
Rectangle 27 467

Unfortunately the opacity element makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity:

The problem with this approach is that some browsers do not understand the rgba format and will not display any border at all if this is the entire declaration. The solution is to provide two border declarations. The first with a fake opacity, and the second with the actual. If a browser is capable, it will use the second, if not, it will use the first.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

The first border declaration will be the equivalent color to a 50% opaque red border over a white background (although any graphics under the border will not bleed through).

UPDATE: I've added "background-clip: padding-box;" to this answer (per SooDesuNe's suggestion in the comments) to ensure the border remains transparent even if a solid background color is applied.

yeah and then we're back to the problem he first had ^^ "I thought about using rgba for the border-color, but it works very poorly across modern browsers." while my solutions works in pretty much all browsers

Actually, rgba works excellently in modern browsers (unless you think IE6-8 are "modern").

well they're suppose to be :P and when you got 50%+ using them you should see to it that it works for ie aswell imo at least for ie7+

And that is why there is the "fake opacity" fall back. My life as a web designer became a lot easier when I accepted that not every browser needs to render identically. If they support border-radius, then they get rounded corners. If not, they don't. The content is still accessible, it still looks fine, it just looks better if they are using a capable browser. I've never had one client complain about this in the past 1.5 years of operating this way on every project.

If you're trying to get the content behind your bordered content to shine though (and NOT the background color of the bordered element itself), you'll need to set background-clip:padding-box; too.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

css - CSS3 Border Opacity? - Stack Overflow

css css3 opacity
Rectangle 27 1909

CSS Triangles: A Tragedy in Five Acts

Then you give it a width of 0...

...and a height of 0...

...and finally, you make the two side borders transparent:

That results in a triangle.

Quality answers, such as "CSS Triangles: A Tragedy in Five Acts," is made possible by the generous upvotes of readers like you.

+1 If only I'd had drawn a picture... :D

@alex If you have scissors strong enough to cut through your monitor, you can make a flip book!

@Jauzsika, you can add these triangles into a page without adding additional elements simply by using :before or :after pseudo classes.

Act with animations: jsfiddle.net/pimvdb/mA4Cu/104. Just for those of us who need even more visual proof like me...

css3 - How do CSS triangles work? - Stack Overflow

css css3 geometry polygon css-shapes
Rectangle 27 1906

CSS Triangles: A Tragedy in Five Acts

Then you give it a width of 0...

...and a height of 0...

...and finally, you make the two side borders transparent:

That results in a triangle.

Quality answers, such as "CSS Triangles: A Tragedy in Five Acts," is made possible by the generous upvotes of readers like you.

+1 If only I'd had drawn a picture... :D

@alex If you have scissors strong enough to cut through your monitor, you can make a flip book!

@Jauzsika, you can add these triangles into a page without adding additional elements simply by using :before or :after pseudo classes.

Act with animations: jsfiddle.net/pimvdb/mA4Cu/104. Just for those of us who need even more visual proof like me...

css3 - How do CSS triangles work? - Stack Overflow

css css3 geometry polygon css-shapes
Rectangle 27 314

Yes. You can use rgba in both webkit and moz gradient declarations:

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

Apparently you can even do this in IE, using an odd "extended hex" syntax. The first pair (in the example 55) refers to the level of opacity:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

FYI, "extended hex" is just 32-bit ARGB instead of 24-bit RGB color values.

id like these to work in standard css, too, but with the alpha at the end (seems more natural): #0001 would be short hex for almost transparent black and #ffcc00ff would be the same as #ffcc00, i.e. completely opaque tangerine yellow

also check out the CSS3 Gradient Generator over at Colorzilla which has a bunch of nice presets and all the cross browser compatible variations to achieve your desired gradient

so, i've checked it out, works on all major browsers but it doesnt work on opera, any clue?

css - CSS3 Transparency + Gradient - Stack Overflow

css css3 gradients
Rectangle 27 145

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Doesn't work with border-radius in the embedded spotify browser :-/

Can anyone using the current version of chrome confirm that this still works? Doesn't work for me in chrome 23.

css - CSS3 Gradient Borders - Stack Overflow

css css3 gradient
Rectangle 27 145

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Doesn't work with border-radius in the embedded spotify browser :-/

Can anyone using the current version of chrome confirm that this still works? Doesn't work for me in chrome 23.

css - CSS3 Gradient Borders - Stack Overflow

css css3 gradient
Rectangle 27 39

width: calc(50% - 24px);

It is highly browser-dependant. Probably around 2020 the ie15 will support it and you will be allowed to use that in your work, too :-(

css - CSS3 box-sizing: margin-box; Why not? - Stack Overflow

css css3 layout position w3c
Rectangle 27 134

Standard CSS3 rotate should work in IE9, but I believe you need to give it a vendor prefix, like so:

-ms-transform: rotate(10deg);

It is possible that it may not work in the beta version; if not, try downloading the current preview version (preview 7), which is a later revision that the beta. I don't have the beta version to test against, so I can't confirm whether it was in that version or not. The final release version is definitely slated to support it.

I can also confirm that the IE-specific filter property has been dropped in IE9.

[Edit] People have asked for some further documentation. As they say, this is quite limited, but I did find this page: http://css3please.com/ which is useful for testing various CSS3 features in all browsers.

But testing the rotate feature on this page in IE9 preview caused it to crash fairly spectacularly.

However I have done some independant tests using -ms-transform:rotate() in IE9 in my own test pages, and it is working fine. So my conclusion is that the feature is implemented, but has got some bugs, possibly related to setting it dynamically.

[EDIT] Reviving this old answer because I recently found out about a hack called CSS Sandpaper which is relevant to the question and may make things easier.

The hack implements support for the standard CSS transform for for old versions of IE. So now you can add the following to your CSS:

-sand-transform: rotate(10deg);

...and have it work in IE 6/7/8, without having to use the filter syntax. (of course it still uses the filter syntax behind the scenes, but this makes it a lot easier to manage because it's using similar syntax to other browsers)

Thanks Spud! I'm gonna check it out now and get back to you on that. Couldn't believe how little documentation there was about this online.

@ime Vidas and @pagewil - you're right, not much documentation around. I found it documented here: css3please.com, though I should note that this page crashed my copy of IE9 preview when I tried to use the rotate property. However, my own independant tests have confirmed that the property does work, with the vendor prefix as I've quoted in my answer. (given the crash, I guess there are still bugs in it though!)

I really don't get why rotate need a vendor prefix, when they go standard with the rest of CSS3

@Eduardo - possibly because the standard hasn't been finalised yet?

css - CSS3 transform: rotate; in IE9 - Stack Overflow

css internet-explorer css3 rotation internet-explorer-9
Rectangle 27 8

Is a <div> with contenteditable an option? Functions just list a <textarea> for most things.

<textarea>&lt;textarea&gt; Doesn't highlight properly in Chrome.</textarea><br />
<input value="&lt;input&gt; Doesn't highlight properly in Chrome." />
<p>&lt;p&gt; Highlights just fine in Chrome!</p>
<div id="div-textarea" contenteditable>&lt;div contenteditable&gt; Highlights just fine in Chrome!</div>
textarea, input, p, div {
    width: 400px;
}

#div-textarea {
    -webkit-appearance: textarea;
    height: 32px;
    overflow: auto;
    resize: both;
}

::selection {
    background-color: black;
    color: white;
}

That's pretty smart, nice idea! I probably won't use it, though. I'm using the inputs to send data to a server. It's not worth replacing the inputs with divs and adjust the AJAX stuff just for the simple styles. :) (Except when the site / app doesn't have a backend). I guess I'll have to wait till the WebKit team fixes this issue.

I just want to ask, how did you make the jsfiddle to link back to the question/

@Truth Scroll way down in the HTML frame. It's at the bottom. It's a manual process I do each time I create one.

css - CSS3 - How to style the selected text in textareas and inputs in...

css google-chrome css3 webkit
Rectangle 27 542

Apply the following CSS:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
margin: 0;
background-attachment: fixed;

I also found out that I needed to add margin:0; on body or else I got a gap at the bottom of my page.

In Chrome and Safari, body { height: 100% } results in the page (but not the gradient) extending down out of the viewport.

I had to add a background-attachment: fixed; to the body to get rid of the bottom gap (Webkit).

Setting a background to the body and then the height of the html tag to 100% does weird things in Internet Explorer. Here's an example (png).

background-repeat
background-attachment
background

css - CSS3 gradient background set on body doesn't stretch but instead...

css css3 gradient
Rectangle 27 542

Apply the following CSS:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
margin: 0;
background-attachment: fixed;

I also found out that I needed to add margin:0; on body or else I got a gap at the bottom of my page.

In Chrome and Safari, body { height: 100% } results in the page (but not the gradient) extending down out of the viewport.

I had to add a background-attachment: fixed; to the body to get rid of the bottom gap (Webkit).

Setting a background to the body and then the height of the html tag to 100% does weird things in Internet Explorer. Here's an example (png).

background-repeat
background-attachment
background

css - CSS3 gradient background set on body doesn't stretch but instead...

css css3 gradient
Rectangle 27 112

It's easy, use a solid shadow with 0 offset:

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

Also, if you set a border-radius to the element, it gives you pretty rounded borders

Funny how this is the best answer, get's around that background issue.

css - CSS3 Border Opacity? - Stack Overflow

css css3 opacity
Rectangle 27 89

instead of borders, I would use background gradients and padding. same look, but much easier, more supported.

a simple example:

<div class="g">
    <div>bla</div>
</div>
.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}

.g > div { background: #fff; }

EDIT: You can also leverage the :before selector as @WalterSchwarz pointed out in this jsFiddle

This is awesome. I was looking for a way to create a gradient underline for a container. In your fiddle I just changed padding to padding-bottom and all my dreams came true!

What does the .g > div selector mean?

@mango the > selects only direct children. this way you can specify styles for this specific div only (which is a kind of a container here) without modifying any further div elements you might put inside.

Using a :before element is better, as you then have full control via CSS and the HTML markup stays clean. Here is a JSFiddle that shows the easiest way this can be done: jsfiddle.net/wschwarz/e2ckdp2v

css - CSS3 Gradient Borders - Stack Overflow

css css3 gradient
Rectangle 27 89

instead of borders, I would use background gradients and padding. same look, but much easier, more supported.

a simple example:

<div class="g">
    <div>bla</div>
</div>
.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}

.g > div { background: #fff; }

EDIT: You can also leverage the :before selector as @WalterSchwarz pointed out in this jsFiddle

This is awesome. I was looking for a way to create a gradient underline for a container. In your fiddle I just changed padding to padding-bottom and all my dreams came true!

What does the .g > div selector mean?

@mango the > selects only direct children. this way you can specify styles for this specific div only (which is a kind of a container here) without modifying any further div elements you might put inside.

Using a :before element is better, as you then have full control via CSS and the HTML markup stays clean. Here is a JSFiddle that shows the easiest way this can be done: jsfiddle.net/wschwarz/e2ckdp2v

css - CSS3 Gradient Borders - Stack Overflow

css css3 gradient
Rectangle 27 78

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

This renders a gradient, starting from solid black at the top, to fully transparent at the bottom.

css - CSS3 Transparency + Gradient - Stack Overflow

css css3 gradients
Rectangle 27 65

CSS3 gradient transition with background-position

Although you cant directly animate gradients using the CSS transition property, it is possible to animate the background-position property to achieve a simple gradient animation:

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}
<div id="DemoGradient"></div>

css - Use CSS3 transitions with gradient backgrounds - Stack Overflow

css css3 gradient css-transitions
Rectangle 27 64

CSS3 gradient transition with background-position

Although you cant directly animate gradients using the CSS transition property, it is possible to animate the background-position property to achieve a simple gradient animation:

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}
<div id="DemoGradient"></div>

css - Use CSS3 transitions with gradient backgrounds - Stack Overflow

css css3 gradient css-transitions