I'm trying to figure out how to make glowing text with css on a dark background. Here's what I've got:
.blackbox, .whitebox {
padding: 20px;
display: table;
border: 1px solid black;
}
.whitebox {
background-color: white;
color: black;
text-shadow: 0 0 5px #000;
}
.blackbox {
background-color: black;
color: white;
text-shadow: 0 0 5px #fff;
}
<div class="whitebox">
Hi there.
</div>
<div class="blackbox">
Hi there.
</div>
The black text in the white box is showing the glow that I defined as black, but the white text in the black box shows nothing. What I'm I doing wrong?
Text shadow property parameters are as follows
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
h-shadow and v-shadow are horizontal and vertical distances. You need to adjust that as well to get the proper shadow. Look at the snippet below.
<html>
<head>
<style>
.blackbox,
.whitebox {
padding: 20px;
display: table;
border: 1px solid black;
}
.whitebox {
background-color: white;
color: black;
text-shadow: 0 0 5px #000;
}
.blackbox {
background-color: black;
color: white;
text-shadow: 8px 8px 5px #fff
}
</style>
</head>
<body>
<div class="whitebox">
Hi there.
</div>
<div class="blackbox">
Hi there.
</div>
</body>
</html>
The white and black shadows are showing in same intensity. But our eyes are more sensitive to the black shadow rather than white shadow. Try changing the h-shadow and v-shadow properties
Add something to encapsulate the text inside
.blackbox,
.whitebox {
padding: 20px;
display: table;
border: 1px solid black;
}
.whitebox {
background-color: white;
color: black;
text-shadow: 0 0 5px #000;
}
.blackbox {
background-color: black;
}
.blackbox p {
color: white;
text-shadow: 0 0 5px #fff;
}
<div class="whitebox">
Hi there.
</div>
<div class="blackbox">
<p>Hi there.</p>
</div>
You can do this by adding multiple text shadows as shown in the snippet below.
To bring a cool effect use different neon colors in the subsequent shadow colors.
.blackbox, .whitebox {
padding: 20px;
display: table;
border: 1px solid black;
}
.whitebox {
background-color: white;
color: black;
text-shadow: 0 0 5px #000;
}
.blackbox {
background-color: black;
color: white;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff;
}
<div class="whitebox">
Hi there.
</div>
<div class="blackbox">
<p>Hi there.</p>
</div>
Hope this helps.
Cheers.
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Closed 2 years ago.
Trying to make a little database for projects for personal use, not sure how to word it but...
what i want:
what i got:
current code:
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 20px;
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
I used a screenshot editor to create the image of what i want, how can i change the code to get the desired effect?
Thanks for your time and hopefully your response.
I would strongly recommend wrapping your sections into containers or HTML5 elements and style them accordingly
See pen HTML and CSS:
https://codepen.io/aystarz52/full/LYpLYBp
HTML
<body>
<div class="container">
<h1 id="Header">What do you want to do?</h1>
</div>
<br>
<div class="page-content-container">
Games   Code<br><br><br>
Articles
</div>
</body>
CSS
body, html {
background: #FFF;
padding:0;
margin:0;
}
.container {
text-align:center;
border: 4px #000 solid;
padding: 10px 0;
background-color: #000;
}
#Header {
color: #FFF;
}
.page-content-container {
padding:10px;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
Is this more or less what you hoped for?
Set padding and margin to zero for the body, set a margin on the header and position at the top of the body....
body{margin:0;padding:0;box-sizing:border-box}
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 20px;
background-color: #000;
margin:0;
top:0;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
What you can do is subtract 10px from the padding-bottom of #Header and add it to padding-top:
#Header {
padding: 30px 0 10px; <--plus ten on top, minus ten on bottom
}
#Header {
text-align: center;
color: #FFF;
border: 4px #000 solid;
padding: 30px 0 10px;
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
To achieve what you want, the easiest way is to increase padding-top on #Header.
Your CSS has some issues, though. I'm listing them here:
border-top: ;
border-right: ;
border-bottom: ;
Omitting the right side of the declaration is not allowed. You need to either add values to assign to those CSS properties, or remove the lines completely.
border=left: ;
I'm assuming this is just a typo - it has to be border-left. Aside from that, same as stated previously. You must assign a value, or remove the declaration.
Background: #FFF;
CSS property names never contain capital letters. Instead, use background: #FFF;
#Header {
text-align: center;
vertical-align: top;
color: #FFF;
border: 4px #000 solid;
border-top: ;
border-right: ;
border-bottom: ;
border=left: ;
padding: 40px 20px 20px; /* short for 40px top, 20px left & right, 20px bottom */
background-color: #000;
}
body {
Background: #FFF;
}
a {
border: 2px #000 solid;
border-radius: 2px;
padding: 8px;
text-decoration: none;
}
<body>
<h1 id="Header">What do you want to do?</h1>
<br>
Games   Code<br><br><br>
Articles
</body>
Set margin-top:0px; in #Header style, That should work for you.
While building a page, I encountered a problem i couldn't explain:
The first div in a sidebar has a weird break above
Second picture, showing that the top div in sidebar (template-sidebar-payment) doesn't actually contain that gap.
I had a margin appear from nowhere, without it being set anywhere (I've searched broad and wide).
#template-sidebar {
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element {
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment {
border-top: 0;
!important
}
#template-sidebar-rules {
border-bottom: 0;
!important
}
<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>
Please note, that the reason for making this a table-cell is because I want the sidebar to scale along the (right hand side) content as it expands in length.
As for now, I tried removing certain things, adding display: blocks etc. but nothing helped.
If any more code is needed (I guess there might be a case where te problem could lie somewhere else?) please ask in comments and I will be happy to provide.
we need live demo for inspecting this situation. but i think setting vertical align to sidebar will solve your problem.
#template-sidebar {
vertical-align:top;
}
I think it's the margin from the hr. Add a margin-top: 0 to it:
#template-sidebar{
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element{
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
margin-top: 0;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment{
border-top: 0; !important
}
#template-sidebar-rules{
border-bottom: 0; !important
}
<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>
The only issue I see, is the padding-right.
Attempt altering padding-right from 15px to 5px and see if that changes anything.
EDIT: Saw your comment. See below.
It probably origins from the
.sidebar-element h4 {
padding-top: 10px;
}
part of your style sheet.
I want to create a border as shown in the image. I tried with all the styles inset, outset,ridge and groove but I was not able to get the expected result.
Is there any way to bend border towards inside till middle and get back towards till top(hope you understand the problem).
If it's repeated question please add the solution link.
Thanks in advance.
I have tried this:
div {
border-bottom: 1px ridge #B5B9BB;
/*border-bottom: 1px inset #B5B9BB;
border-bottom: 1px outset #B5B9BB;
border-bottom: 1px groove #B5B9BB; */
}
You could use outline:
.bordered {
border-bottom: 1px solid grey;
background: aliceblue;
outline: 5px solid aliceblue;
}
<div class="bordered">Available Apps</div>
Demo
Seems why not just use a border on the text?
div {
background: lightgrey;
padding: 0.5em;
}
p {
border-bottom: 1px ridge #B5B9BB;
}
<div>
<p>Available Apps</p>
</div>
It is probably best to use a wrapping element if possible; it is more flexible than outline (supports border-radius, box-shadows etc.)
For example:
<div class="headline-area">
<h2>Available Apps</h2>
</div>
with the CSS:
.headline-area {
background:#D4D9DC;
padding:5px;
}
.headline-area h2 {
border-bottom:1px solid #B5B9BB;
}
Whenever I am in your situation I use box-shadow:
body {
background:#D1D6D9;
font-family:verdana;
}
div {
border-bottom: 1px solid #B5B9BB;
box-shadow:0 1px 1px rgba(255,255,255,.7);
padding-bottom:5px;
}
<div>Available Apps</div>
You could always try a hr tag. You can then style it in CSS to your desired preference.
HTML
New apps
<hr>
Try this Also but you need an extra Div to do so.
HTML
<div class="outerDiv">
COntent
<div class="innerDiV">
</div>
<div>
CSS
.outerDiv{
background-color: grey;
height: 32px;
text-align: center;
padding: 16px;
font-weight: bolder;
font-size: 25px;
}
.innerDiV{
margin: 0 auto;
border: 1px solid black;
width: 98%;
margin-top: 10px;
}
Demo
I´m trying to do some buttons with image and text, and I already did this work.
But now I´m studying a diferente hypothesis, If I have a text bigger I´m trying to center the text in the button but I´m not having sucess put this right. I´m not having succeess putting my very big is not good align-center just below the 1st text.
Have you ever had a case like this? How we can solve this?
I have this Html for two buttons:
<button class='btn'>
<img class="big_btn" src="icon1.png" width="40" height="40"/>
Big button so big <span> very big is not good</span>
</button>
<button class='btn'>
<img src="icon1.png" width="40" height="40">
2button big
</button>
And I have this css file:
.btn {
position: relative;
width: 180px;
height: 60px;
margin-top:7%;
padding: 0 10px 0 10px;
line-height: 37px;
text-align: left;
text-indent: 10px;
font-family: 'bariol_regularregular';
font-size: 15px;
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f1f1f1; /* button background */
border: 0;
border-bottom: 2px solid #999; /* newsletter button shadow */
border-radius: 14px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #999;
box-shadow: inset 0 -2px #999;
}
.btn:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn img { float: left;}
.btn .big { margin-top:10px;}
.btn:hover { background-color: #f7f7f7;}
Here's the Fiddle: http://jsfiddle.net/3F9pu/
My image updated:
Your problem is your line-height attribute. If you set that to be 37px, each new line of text will be separated by 37px. Remove `line-height:37px and the text will wrap around the image.
line-height: 37px
I also removed your text-indent and replaced it with a margin on your floated image to make the text all align properly.
.btn img{
float:left;
margin-right: 10px;
}
text-indent: 10px
JSFiddle
Use a CSS background image.
Have a fiddle - Fiddle Link!
HTML
<button class='btn'>Big button so big very big is not good</button>
<button class='btn'>2button big</button>
CSS
.btn {
background: url("http://lorempixel.com/output/cats-q-c-40-40-3.jpg") #CCC 10px no-repeat;
border: none;
padding: 10px 10px 10px 60px;
width: 200px;
text-align: left;
vertical-align: top;
min-height: 60px;
cursor: pointer;
}
.btn:hover {
background-color: #F00;
}
HTML:
<div class="div1">
<h2>Set RSVP & Check in</h2>
<p>
Set RSVP to remind all events you plan to go.
</p>
</div>
CSS:
.div1 {
float: left;
margin: 0 20px 0 0;
padding: 0;
width: 300px;
height: 156px;
}
.div1 h2 {
color: #fff;
font-size: 24px;
font-weight:bold;
box-shadow: 1px 1px 0 black;
}
And border appears like "table border" not the border on text:
http://screencast.com/t/OrFfBL9MK
I think you are confusing box-shadow with text-shadow.
Try this:
.div1 h2 {
color: #fff;
font-size: 24px;
font-weight:bold;
text-shadow: #000000 1px 1px 0px;
}