Pure CSS implementation of Wired.com's hyperlink style - css
Wired's mobile view (set your user-agent to iOS Safari to see it on desktop) features an elegant twist to the standard underlined hyperlink style:
I assumed this was achieved purely by CSS without external graphics, but no:
background-image: url(http://cdn.mobify.com/sites/wired/production/i/link-bg.png);
background-size: 5px 24px;
I'm well aware of using the border property to create custom weighted underlines but am unable to create the line undercut as a margin-bottom offset cuts off when reaching the baseline of the text.
Can this style be achieved using only CSS?
You can apply an inset box-shadow property:
a {
text-decoration: none;
color: #000;
box-shadow: inset 0 -4px 0 #c0e6f7;
}
jsFiddle demo
The first value is inset, which makes the box-shadow go inward, opposed to outwards (for the lack of a better way to put it) and the second value 0 is the x-value (the box shadow from side to side). The next -4px is the y-value (from top to bottom). The third is 0 so that there is no "blur" effect on the shadow (thus giving you a solid border effect) and then the color value comes next. :)
You can do this with a linear gradient and background size.
Demo
a {
text-decoration: none;
color: inherit;
background: linear-gradient(to bottom, rgb(227,244,251), rgb(175,221,243)) bottom repeat-x;
background-size: 25%;
}
I like #JaceCotton's answer but it is lacking some small details that WIRED has in their image version. Details such as a slightly darker blue line along the bottom on the underline and a soft top to the underline.
These details may not be important or that noticeable but I think the tiny details really help along the marker underline effect of the original WIRED version.
Just add this css to any a tag to see the effect (demo):
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(198,232,248,0) 75%, rgba(192,230,247,1) 83%, rgba(192,230,247,1) 94%, rgba(184,226,245,1) 95%, rgba(184,226,245,1) 97%, rgba(184,226,245,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(75%,rgba(198,232,248,0)), color-stop(83%,rgba(192,230,247,1)), color-stop(94%,rgba(192,230,247,1)), color-stop(95%,rgba(184,226,245,1)), color-stop(97%,rgba(184,226,245,1)), color-stop(100%,rgba(184,226,245,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(198,232,248,0) 75%,rgba(192,230,247,1) 83%,rgba(192,230,247,1) 94%,rgba(184,226,245,1) 95%,rgba(184,226,245,1) 97%,rgba(184,226,245,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00b8e2f5',GradientType=0 ); /* IE6-9 */
Related
CSS3 : what is right syntax to get gradient like on image? [duplicate]
This question already has answers here:
CSS3 cross browser linear gradient
(4 answers)
Closed 8 years ago.
I'm trying to get gradient in DIV using the CSS3 like on the image:
Using:
.bar-header {
background: linear-gradient(to bottom top, yellow , blue) !important;
}
But without luck, what is the right syntax to get result like on the image above?
Thanks for any advice.
A bit longer code could provide better cross-browser support. Note that not all of these are needed. I've also added a border on the top, not quite sure if you need it.
.bar-header {
background: #409be8; /* Old browsers */
background: -moz-linear-gradient(top, #409be8 0%, #4883e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#409be8), color-stop(100%,#4883e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #409be8 0%,#4883e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #409be8 0%,#4883e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #409be8 0%,#4883e6 100%); /* IE10+ */
background: linear-gradient(to bottom, #409be8 0%,#4883e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#409be8', endColorstr='#4883e6',GradientType=0 ); /* IE6-9 */
border-top: 2px solid #545de4; /* Border displayed above */
width: 808px; /* For the demo, to make it visible */
height: 100px; /* For the demo, to make it visible */
}
<div class="bar-header"></div>
Use some add-on like Color Picker/ColorZilla and etc to get colors on top/middle/bottom of the image and use this data in some "CSS Gradient Generator". To find any of these programms use Google search.
Boostrap Fluid, Two Color Background Gradient
I am trying to do a vertical two tone background (using css gradient) for my site using twitter bootstrap, such that the gradient ends in the center of the gutter between the spans in a row fluid. I already have the gradient code (shown below) and am trying to figure out what to put for the x's so that the background changes where I want it to. Here is a visual example: <----------color 1----------><------------------color 2-----------------> <-----span 4--------><-gutter-><------------span 8 ----------------> What should go in the x's below? background: #333333; /* Old browsers */ background: -moz-linear-gradient(left, #333333 0%, #333333 x, #ffffff x, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#333333), color-stop(x,#333333), color-stop(x,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #333333 0%,#333333 x,#ffffff x,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #333333 0%,#333333 x,#ffffff x,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #333333 0%,#333333 x,#ffffff x,#ffffff 100%); /* IE10+ */ background: linear-gradient(to right, #333333 0%,#333333 x,#ffffff x,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ Also relevant: I am not using responsive bootstrap for large monitors and mobile devices, which changes the gutter size.
Turns out there is a simple solution. For my case, with span4 and span8, setting "x" to 33.333% (1/3) did the trick. The beauty of fluid boostrap is that it maintains the ratios of the spans for the entire page. Drop a comment if you think of any cases where this doesn't work.
If Column view header is empty, the header does not fill the full size in IE
The problem is hard do describe without a screenshot...
I've styled the column view headers of views in xpages using this css just to get an gradient in all browsers:
.xspPanelViewColumnHeader {
background: #58a8cd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU4YThjZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBjODNiMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzBmNmM5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMjdkYWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #58a8cd 0%, #0c83b2 50%, #0f6c95 51%, #127daa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58a8cd), color-stop(50%,#0c83b2), color-stop(51%,#0f6c95), color-stop(100%,#127daa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* IE10+ */
background: linear-gradient(to bottom, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* W3C */
background-position: left top;
color: #FFFFFF;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
Works fine so far. But if the column view header does not have a label there's a problem with the gradient in IE9 (not in Firefox).
In IE9 the gradient does not fill the full size of the header - i can see two blocks (one horizontal and on vertical) but both only a few pixels wide. But the rest of the column header stays white.
As soon as I enter a label (and even if it is only a ".") the header will be displayed as usual (full height and full width with the gradient).
This way works:
<xp:viewColumnHeader id="viewColumnHeader1" value="."></xp:viewColumnHeader>
This doesn't:
<xp:viewColumnHeader id="viewColumnHeader1"></xp:viewColumnHeader>
So the question is (if anybody could follow my description): How can I edit the css to prevent the column header to shrink with no defined label?
Firefox css linear-gradient property over part of div instead of whole div?
Please see the images below. Notice how the inner gradient in Chrome permeates only for only 10px from the top to bottom whereas in Firefox, the gradient permeates throughout the whole div. I want to make the Firefox gradient to behave like Chrome gradient. Is there some way in Firefox to do this? The following are my css code for Chrome and Firefox. background: -webkit-gradient(linear, 0 0, 0 10, from(#F5F6F7), to(white)); background: -moz-linear-gradient(top, #F5F6F7, white); Chrome Firefox
I think you may be looking for something like this: background: -moz-linear-gradient(top, #CCC 0%, #FFFFFF 10%); You were just missing the color stop arguments. Live Demo: http://jsfiddle.net/kd8Vf/3/ I changed the colour to #CCC and the background to black so you can see it better. Change back the colours accordingly. Also see: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient
Something like this: gradient example background: #034769; background: -moz-linear-gradient(top, #034769 0%, #63add0 10%, #ffffff 27%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#034769), color-stop(10%,#63add0), color-stop(27%,#ffffff)); background: -webkit-linear-gradient(top, #034769 0%,#63add0 10%,#ffffff 27%); background: -o-linear-gradient(top, #034769 0%,#63add0 10%,#ffffff 27%); background: -ms-linear-gradient(top, #034769 0%,#63add0 10%,#ffffff 27%); background: linear-gradient(to bottom, #034769 0%,#63add0 10%,#ffffff 27%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#034769', endColorstr='#ffffff',GradientType=0 );
Background color on input type=button :hover state sticks in IE
I have an input type=button with a background color set and a different one on :hover - see http://jsfiddle.net/hc2Eu/3/ In IE (all versions) - when I mouse down on the button, move off the button, then mouseup - the background color stays in the :hover setting until you mouse over it again. Is there some workaround for this? Preferably not with js? (IE6 not necessary)
There might be a fix to <input type="button"> - but if there is, I don't know it.
Otherwise, a good option seems to be to replace it with a carefully styled a element.
Example: http://jsfiddle.net/Uka5v/
.button {
background-color: #E3E1B8;
padding: 2px 4px;
font: 13px sans-serif;
text-decoration: none;
border: 1px solid #000;
border-color: #aaa #444 #444 #aaa;
color: #000
}
Upsides include that the a element will style consistently between different (older) versions of Internet Explorer without any extra work, and I think my link looks nicer than that button :)
Try using the type attribute selector to find buttons (maybe this'll fix it too):
input[type=button]
{
background-color: #E3E1B8;
}
input[type=button]:hover
{
background-color: #46000D
}
You need to make sure images come first and put in a comma after the background image call. then it actually does work: background:url(egg.png) no-repeat 70px 2px #82d4fe; /* Old browsers */ background:url(egg.png) no-repeat 70px 2px, -moz-linear-gradient(top, #82d4fe 0%, #1db2ff 78%) ; /* FF3.6+ */ background:url(egg.png) no-repeat 70px 2px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d4fe), color-stop(78%,#1db2ff)); /* Chrome,Safari4+ */ background:url(egg.png) no-repeat 70px 2px, -webkit-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Chrome10+,Safari5.1+ */ background:url(egg.png) no-repeat 70px 2px, -o-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Opera11.10+ */ background:url(egg.png) no-repeat 70px 2px, -ms-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82d4fe', endColorstr='#1db2ff',GradientType=0 ); /* IE6-9 */ background:url(egg.png) no-repeat 70px 2px, linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* W3C */