How to make a box shadow bigger without making the "fog" effect weaker [closed] - html

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 yesterday.
Improve this question
When I try and use the box-shadow: 0 0px 60px #2332d8; string and change the 60px area, it makes the "fog" spread out, but makes it less visable, or makes it "thinner" if you will. How do I make it so it doesn't spread out, but instead adds more "fog"?
div {
height: 100px;
width: 100px
padding: 10px;
box-shadow: 0 0px 60px #2332d8;
}
<div></div>
When I tried to change it to 60px, I thought it was going to just make it bigger, but instead it just made it spread out

Related

How can I make effect at the bottom of input while hovering? [closed]

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 2 years ago.
Improve this question
I'm looking for some techlogy that I can make an effect at the bottom of <input> element when I hover on it. Like this:
If I understand correctly, you're looking for box-shadow property. Like this:
input {
width: 280px;
height: 20px;
border: 3px inset;
}
input:hover {
box-shadow: 0 2px cyan;
}
<input type="text">

Adding margin/space to paragraph [closed]

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 3 years ago.
Improve this question
I was wondering what the best way is to get some white space below paragraphs and other elements. I have seen man websites that have empty p-divs in the html(created by ), but this is probably bad practise, isn't it? Is it recommended to use margins in this case?
As noted in the comments, use margin styling. You can add a class to you divs and style on that, or you can add a default style to all tags of a certain type, etc.
<p class="my-paragraph">
Here is some text.
</p>
.my-paragraph {
margin: 15px;
}
or if you want to apply it to all
p {
margin: 15px;
}
And you can target different margin directions:
p {
margin-top: 15px;
margin-bottom: 20px;
margin-left: 50px;
margin-right: 15px;
}

Add a small background for single line of text [closed]

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 4 years ago.
Improve this question
I am looking for a solution to this design. I have tried pseudo classes and position: absolute but it doesn't work for multiple lines of text.
The design I want:
Thank you in advance for any help!
You can use box-shadow for this:
span {
font-size: 50px;
font-weight: bold;
box-shadow: inset 0 25px 0 white, inset 0 -22px 0 rgba(0,0,0,0.5)
}
<span>Hello!! How are you</span>

How can i create a triangle in css with a box-shadow on the longest side [closed]

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 am currently designing an android phonegap application and i need help trying to recreate the triangles with a Box-shadow of some sort but the box shadow will only show as a square and not a triangle. When i tried searching for an answer, i could only find one for equilateral triangles or only on two sides, not the longest side.
The Design (Hidden some parts):
https://i.stack.imgur.com/ysopX.png
Edit:
Pastebin Link for current prototype (Currently not responsive - designed for 1080px by 1920px):
pastebin.com/GmYh9d9F
What you need is the drop-shadow filter:
.test {
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #007bff transparent;
filter: drop-shadow(0 0 4px #555);
}
<div class="test"></div>

CSS for a HTML Newsletter [closed]

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 7 years ago.
Improve this question
I have the following CSS:
#Wrapper {
width: 600px;
background: #FFFFFF;
margin: 0 auto;
padding: 5px;
border-radius: 10px;
}
And the following HTML:
<div id="Wrapper">
...
</div>
But for some reason the wrapper's CSS styling does not extend the full length of the HTML.
I'm missing something obvious I'm sure but can't see the wood for the trees right now and pasting all the code would just make my post look a mess.
Any thoughts...?
Use tables for emails to be consistent across all clients.
Then you should read up on CSS use within emails.
margins, border-radius are not acceptable.
http://www.campaignmonitor.com/css/