I have a little problem for converting a photoshop design to css :
desired effect : (done with photosohp, drop shadow + motion blur effect)
current effect (css) :
css for current effect :
.horizontal_separator {
height: 1px;
display : block;
border: 0;
border-top: 1px solid #100f0b;
margin: 1em 0;
padding 0;
box-shadow: 0px -1px 0px #2c2626;
}
#karim I've created a fiddle please check https://jsfiddle.net/3kn7vxk1/2/
.horizontal_separator {
position: relative;
height: 1px;
display: block;
border: 0;
background: -moz-linear-gradient(left, rgba(125, 185, 232, 0) 0%, rgba(16, 15, 11, 1) 100%);
background: -webkit-linear-gradient(left, rgba(125, 185, 232, 0) 0%, rgba(16, 15, 11, 1) 100%);
background: linear-gradient(to right, rgba(125, 185, 232, 0) 0%, rgba(16, 15, 11, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#100f0b', GradientType=1);
margin: 1em 0;
padding 0;
}
You could use css gradients to achieve this. heres a JSFiddle
With your css being:
.horizontal_separator {
height: 3px;
display : block;
border: 0;
background: -webkit-linear-gradient(left, #666, #000, #666);
background: -moz-linear-gradient(left, #666, #000, #666);
background: -o-linear-gradient(left, #666, #000, #666);
background: linear-gradient(to right, #666, #000, #666);
margin: 1em 0;
padding 0;
box-shadow: 0px -1px 0px #333;
filter: blur(1px);
-webkit-filter: blur(1px);
}
Related
In my case, I want to achieve exactly same thing and don't know how I'm suppose to do that.
.apply-button {
position: absolute;
margin-top: 8rem;
border-radius: 5em;
box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
border-style: solid;
border-width: 0.275rem;
border-image-slice: 0;
border-image-source: linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
background-origin: border-box;
background-clip: content-box, border-box;
background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
}
<a role="button" class="apply-button" href="#"><p>apply</p></a>
Tried to understand your question however did not get what you exactly want :
here is sample code to achieve hover effect.
.showOnHover{display : none;}
.apply-button:hover .showOnHover{
display : inline;
}
.apply-button:hover{
display:block;
text-align : center;
}
.apply-button {
display : inline-block;
margin-top: 8rem;
border-radius: 5em;
box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
border-style: solid;
border-width: 0.275rem;
border-image-slice: 0;
border-image-source: linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
background-origin: border-box;
background-clip: content-box, border-box;
background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
}
<p class="apply-button"><a role="button" href="#">apply</a> <span class="showOnHover"> | <a role="button" href="#">apply</a></span></p>
I want to customize a slider like this:
So I was wondering if there was an easy CSS way of doing that, which would adapt to the width of the parent element. Or if I need to add circles in my html and set the color given the percentage.
Here are my two problems that I don't know how to do in full CSS:
Make circles repeat in the background
color only circles using some kind of overlay div that would have background: #color
Is any of that possible?
Thanks!
I don't want to use anything with javascript though, my webpages are heavy enough as is :p
You can use a repeated radial gradient to create dots like this:
Create a single circle with a radial gradient:
radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%)
Place the gradient into a background which is repeated on the x-axis with background-repeat: repeat-x
Center the background horizontally with background-position
Control the size of the circles with background-size
Example
body {
margin: 0;
}
div {
background: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%);
background-size: 20px 20px;
background-repeat: repeat-x;
background-position: 5px center;
width: 100vw;
height: 50px;
}
<div></div>
Create a custom range slider input
You can use <input type="range"> and customise it. It's a little bit messy to work cross-browser.
Example
body {
margin: 0;
}
input[type=range] {
-webkit-appearance: none;
cursor: pointer;
background: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%, transparent 100%) 5px center repeat-x;
background-size: 20px 20px;
width: 100vw;
height: 50px;
outline: 0;
margin: 0;
box-sizing: border-box;
}
/*Chrome*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 27px;
width: 15px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
border-radius: 4px;
background-size: 100% 17px;
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.5);
transition: box-shadow .3s;
}
input[type=range]:focus::-webkit-slider-thumb {
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.5)
}
/*Firefox*/
input[type=range]::-moz-range-thumb {
height: 27px;
width: 15px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
border-radius: 4px;
background-size: 100% 17px;
border: none;
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type=range]::-moz-range-track {
background: none;
}
/*IE 11 and Edge*/
input[type=range]::-ms-track {
color: transparent;
background: none;
border: none;
}
input[type=range]::-ms-thumb {
height: 27px;
width: 15px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
border-radius: 4px;
background-size: 100% 17px;
border: none;
margin-top: 3px;
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type=range]::-ms-fill-lower {
background: none;
}
input[type=range]::-ms-fill-upper {
background: none;
}
<input type="range">
A useful blog article on cross-browser range input styling can be found over here.
You could fudge it with a full-stop repeated within a CSS content attribute on the :before and :after selectors.
Crude example:
https://jsfiddle.net/xkueyxvb/
I have this JsFiddle: Click here
<div id='menu'>
<ul>
<li><a class='styleanchor' href="${pageContext.request.contextPath}/mainpage/">
hone</a></li><!--
--><li><a class='styleanchor' href="${pageContext.request.contextPath}/verification/user/">asdsad</a></li><!--
--><li><a class='styleanchor' href="${pageContext.request.contextPath}/verification/user/">Replace this LOL</a></li><!--
--><li><a class='styleanchor' href=index.html>Replace this LOL</a></li><!--
--><li><a class='styleanchor' href=index.html>Replace this LOL</a></li><!--
--><li><a class='styleanchor' href="${pageContext.request.contextPath}/verification/store/"></a></li>
</ul>
</div>
What I want to have my border more look like this the border in the image:
As you can see it has an inset border with padding on top and bottom i guess.
How can I achieve those using css? I tried adding padding to li but it didnt work.
If I understand the question here is DEMO
a.styleanchor:hover:before
{
content: "";
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 8px solid transparent;
border-bottom: 8px solid #ffffff;
left: 43%;
right:43%;
bottom: 0;
}
#menu {
text-align: center;
position: relative;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
border-radius: 10px 10px 0px 0px;
}
box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.1), inset 0 3px 2px 5px rgba(0, 0, 0, 0.1);
Here is the link to my site. When you have a wide resolution there is no issue with the dispaly, but if with the brower I try to simulate a little resolution, I come across an issue :
The nav bar won't fill the entire page but only the width of the browser, even though I used width : 100%;
Here the code in CSS
header {
width: 100%;
/*min-width: 1000px;*/
-webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
padding-top: 60px; /* Gere l'espace entre le top et la barre de menu */
background: url('../img/binding_dark.png');
}
nav {
margin-bottom: 30px;
width: 100%;
background: -moz-linear-gradient(top, #353535 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#222222));
background: -webkit-linear-gradient(top, #353535 0%,#222222 100%);
background: -o-linear-gradient(top, #353535 0%,#222222 100%);
background: -ms-linear-gradient(top, #353535 0%,#222222 100%);
background: linear-gradient(top, #353535 0%,#222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#222222',GradientType=0 );
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #000;
}
The header is the wide black block and the nav is inside it.
Here is an exemple of the issue:
The header won't fill all the page (horizontally), the li element would overflow, and gradient background would split.
Is there a solution to this please ?
Here is your corrected css and fiddle link
header {
width: 100%;
-webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
padding-top: 60px; /* Gere l'espace entre le top et la barre de menu */
background: url('../img/binding_dark.png');
}
hgroup,
main,
nav {
margin-bottom: 30px;
width: 100%;
background: -moz-linear-gradient(top, #353535 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#222222));
background: -webkit-linear-gradient(top, #353535 0%,#222222 100%);
background: -o-linear-gradient(top, #353535 0%,#222222 100%);
background: -ms-linear-gradient(top, #353535 0%,#222222 100%);
background: linear-gradient(top, #353535 0%,#222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#222222',GradientType=0 );
border-top:1px solid #000;
border-bottom:1px solid #000;
}
/* nav:before {
border-top: 1px solid #444;
}
nav:after {
border-top: 1px solid #333;
}*/
nav ul {
/*width: 808px;*/
height: 45px;
margin: 0 auto;
/*border-left: 1px solid #111;
border-right: 1px solid #444;*/
}
nav li {
float: left;
list-style-type:none;
}
nav li a {
display: inline-block;
/*width: 200px;*/
width:auto;
padding:0 50px;
height: 45px;
font: bold 15px 'Arial', sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 48px;
text-shadow: 1px 1px 0px #111;
filter: dropshadow(color=#111, offx=1, offy=1);
border-left: 1px solid #444;
border-right: 1px solid #111;
background-color:#2B2B2B;
}
nav li a:hover {
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
background: -webkit-linear-gradient(top, #444 0%,#222 100%);
background: -o-linear-gradient(top, #444 0%,#222 100%);
background: -ms-linear-gradient(top, #444 0%,#222 100%);
background: linear-gradient(top, #444 0%,#222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#222',GradientType=0 );
/*background-color:#2F2F2F;*/
}
nav li a:active {
background: #222;
-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
}
nav li a:active:after {
content: "";
display: block;
width: 100%;
height: 4px;
position: relative;
bottom: 6px;
background: -moz-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5e1f), color-stop(100%,#ff3410));
background: -webkit-linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
background: -o-linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
background: -ms-linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
background: linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5e1f', endColorstr='#ff3410',GradientType=0 );
}
There are other issues with the layout, but for the immediate problem, you could try
#page-wrap header {min-width: 1400px;}
Try increasing the width of the nav ul.
nav ul {
width: 809px;
height: 45px;
margin: 0 auto;
border-left: 1px solid #111;
border-right: 1px solid #444;
}
You can use Developer Tools(F12) to inspect elements.
Check this .
In IE8 one of my buttons background's is overflowing it's border. Here is an image that highlights the problem:
A live example can be seen here: http://rcnhca.org.uk/sites/first_steps/
The markup for the button is:
<a class="button alpha bold" href="#">
<img alt="rcn icon" src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/rcn-icon.png">
</a>
And the css (I use filters to draw a gradient instead of an image):
a.button.alpha, a.button.alpha:focus {
margin-left: 0px;
}
a.button.omega, a.button.omega:focus {
margin-right: 0px;
}
a.button{
display: block;
position: relative;
float: left;
margin: 10px 5px;
right: 0px;
height: 2.438em;
line-height: 2.438em;
padding: 0 0.938em;
border: #3a90a7 2px solid;
font-size: 0.938em;
text-decoration: none;
color: #202d32;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.oldie a.button{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
a.button:hover {
border: #202d32 solid 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}
a.button:active{
padding-top: 0.125em;
padding-left: 1.063em;
padding-right: 0.813em;
height: 2.313em;
background: #e5e5e5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: #cccccc;
background: -moz-linear-gradient(top, #cccccc 0%, #cccccc 3%, #e5e5e5 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(3%,#cccccc), color-stop(5%,#e5e5e5), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: -o-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: -ms-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
-moz-box-shadow: 0 1px 2px #AAAAAA inset;
box-shadow: 0 1px 2px #AAAAAA inset;
}
.oldie a.button:active {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
}
a.button img {
position: relative;
margin-right: 15px;
vertical-align: middle;
}
Does anyone know what's going on? Thanks.
I can't explain why, but when you remove the horizontal margins on the anchor it fixes the problem (both left and right)
My best guess is that the IE filter is doing something unpredictable.
If you wrap the element then apply a margin to that instead, it should solve it.
there is no way to do this for IE8 because its not support css3 BTW its work in IE9.
for more details about IE & CSS compatibility check this
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx