Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I am wondering how to do this in css :
enter image description here
Basically, I can do everything out of it. But I dont manage to recreate the halo surroundering the borders. Could you please advise ? :)
EDIT :
I am quite stuck at making the border with the fading
This effect can be achieved with box-shadows like so:
.box {
margin: 20px;
padding: 20px;
background: lightgreen;
width: 200px;
}
.halo {
-webkit-box-shadow: 0px 0px 7px 11px rgba(255,165,28,0.59);
box-shadow: 0px 0px 7px 11px rgba(255,165,28,0.59);
}
<div class="box halo">Hello There, I am a box, play with my colours to get different results, use the last two pixel values to play with the size and blur.</div>
In order to learn more about box shadows in CSS, you can find its documentation here: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Recently I rebuild the Spotify home page using pure Javascript and scss to test my front-end study, Here is the link.It's not finished yet.
You can see the the difference between mine and the real one is the big-background, the markup is
<div class="bg-main">
<sceiotn class="can-see-the-background-image-1"></section>
<sceiotn class="can-see-the-background-image-2"></section>
</div>
I gave the section rgba(rgb,0.7) background,You can see the effect is not that bright as the real one,which can see the back albums clearly.I dig into their source code,But I didn't find the trick.
Solution
First, add the gradient to the background property on your element <div class="bg-main">:
.bg-main {
width: 100%;
height: auto;
background-attachment: fixed;
background: url(../img/bg-albums.png) repeat,
linear-gradient(50deg, rgba(255, 65, 105, 1) 0,
rgba(124, 38, 248, 1) 100%) repeat
position: relative;
}
Then, in your element <header class="header"> remove the gradient from the background property:
.header {
height: 760px;
width: 100%;
text-align: center;
}
Explanation
The reason Spotify's is clear to see is because the background colour gradient is on the same element as the image. So the image is superimposed on top of the background gradient.
On your site you have the image underneath, and then you place a faded background over the top - making it more difficult to see. With the image on top of the gradient background, it makes the album art much clearer and easier to see.
final result
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to add 3 green circles with the :before pseudo-element in order to show the in-stock-status of my products similar to below:
http://www.chililips.com/LACOSTE-Lounge-Pant-Schlafhose-lang-gruen
I only know how to apply ONE circle, but how can I add three or more? I also thought of using HTML characters, but there are no green circles...
Box shadows...no pseudo-elements required. Unless you want to.
.blob {
width: 50px;
height: 50px;
background: lime;
border-radius: 50%;
margin: 3em 15em;
box-shadow: 5em 0em 0 lime, 10em 0em 0 lime;
}
<div class="blob"></div>
If you are using font icons you can simply add like single one instead of three same content
.fa-circle:before {
content: "\f111" "\f111" "\f111";
}
This is an example of fontawosome icon,you can manage space between icons by letter-spacing
OR
If you are using image for icon, then just take image with three icons or use multiple background images like background: background1, background 2, ..., backgroundN;
Read more about multiple background images
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Please how to do this chart in HTML and CSS ??
Where the circles are buttons ..
Use the following:
Your basic circle:
.circle {
width: 100px;
height: 100px;
border-radius: 50px; /*Make it a circle (border-radius = 1/2*width & height)*/
background-color: hotPink;
border: none;
}
<button class="circle">Motion Detection</button>
<!-- Using a button to generate the circle -->
Then use position: absolute; with the left and right properties to position the circles.
Have a `Live positioned in the middle of your page with:
<style>
#text {
font-family: MyFont, sans-serif;
color: white;
}
<style>
For the lines I would use divs, and give them a height of 2px and a width of what ever (350px for example.) For the positioning, again use the position property (learn how to use it here: w3schools.com/css/css_positioning.asp) – joe_young just now edit
Use the above to help you create what you want, but as has already been said,
This is not a code generating service, try yourself and ask questions about the code you're having trouble with.
In other words, have a go, come back to us when you have tried and have a specific problem.
Good luck
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am trying to have my image appear on top of a 300px border, as if the border is a background color for the image. This is my code:
.containerpagecontent { border-left: 300px solid #fff; } img { float:left; }
But it is still not working. What am I doing wrong?
NOTE: I cannot simply use background-color for the image, because the end of the image has to extend off the color.
There is no such thing as:
margin-left: 300px solid #fff;
you probably meant:
border-left: 300px solid #fff;
Also, see if something like this might work for you: http://jsfiddle.net/Lb6Rz/. It's using the padding and background properties on a single element to create a border.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have some experience making linear gradients in CSS but I would really like to make a radial gradient similar to this image
http://i.stack.imgur.com/T85xO.png
Basically a light grey radial positioned at the bottom of the element
You can play with this tool here. Will give you the code as you generate what you want.
http://www.westciv.com/tools/radialgradients/index.html
http://gradients.glrzad.com/
Radial gradients are in an implementation mess right now, Safari doesn't support elliptical radial backgrounds (Webkit Nightly does, so support for Safari is coming soon). Chrome has so many versions I'm not sure about it, and IE9 doesn't support them.
So I'd say your best option is faking it through inset box shadows:
.shadow {
height: 80px;
box-shadow: inset 0 75px 75px #fff,
inset 0 50px 50px #fff,
inset 0 20px 20px #fff,
inset 0 5px 5px #fff;
background: #ccc;
}
http://jsfiddle.net/nmtHf/
24 Ways covered Graidents in Depth this Year with the following article:
http://24ways.org/2010/everything-you-wanted-to-know-about-gradients
Towards the bottom they spend a whole section on radial graidents and
give you two articles of suggested reading:
MDN
Safari
I would suggest the tool robx posted, but if your like me, you like extra reading on understanding of how things work.