I have a div tag with background-color: #FFFFFF and opacity: 0.08. Inside it is a span tag with the colour white. What can I do to make the white text stand out in the grey background in the parent div? It seems that i cannot increase parent's opacity
Or you should be able to get this effect by using rgba() notation:
div{
background-color: rgba(255, 255, 255, 0.08);
}
span {
color: #fff;
}
Just make it a fairly dark grey:
#background {
background-color: #222222;
text-align: center;
vertical-align: middle;
}
#text {
color: #FFFFFF;
background-color: #444444;
}
body {
font-family: sans-serif;
}
<div id="background" style="height: 100vh; width: 100vw;">
<span id="text">Ngay Nhap Vien</span>
</div>
You could use text-shadow as well along with RGBA Fiddle
HTML:
<div>
<span>text</span>
</div>
CSS:
div {
background-color: rgba(255, 255, 255, 0.08);
}
span {
color: #FFF;
text-shadow: 0px 1px 10px black;
font-size: 30px;
}
Related
This is all my code (the code seems very messy because I just started learning about 2/3 weeks ago). I cant seem to style the anchor elements. I even tried putting a class on them and it also doesn't works. I'm kinda new to this thing.
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Merriweather:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#500&display=swap');
body {
height: 100%;
margin: 0;
padding: 0;
background: #bbb;
}
.ex-house {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.house-dh {
position: absolute;
top: -20%;
left: 2%;
padding: 0px;
margin: 0px;
color: rgb(255, 255, 255);
font-family: 'Bree serif';
font-size: 125px;
text-align: center;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.about-gnco1 {
position: absolute;
color: rgb(255, 255, 255);
font-family: 'Inter';
font-size: 35px;
text-align: left;
margin: 0px;
padding: 0px;
left: 2%;
top: 20%;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
/* this is my code for the style element i think i did it right but when i run it. the a href element dosent change */
.front-button {
font-family: 'Bebas Neue';
font-size: 20px;
color: white;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.front-button a {
margin: 0 20px;
}
<body>
<div class="front">
<img class="ex-house" src="https://via.placeholder.com/80" alt="dreamhouse">
<div class="house-dh">
<p>grandnew.co</p>
</div>
<div class="about-gnco">
<p class="about-gnco1">Is here to help you<br> build your own<br> Dream House.</p>
</div>
</div>
</div>
<div class="front-button">
CUSTOMIZE
DESIGNS
PLANS
ABOUT US
</div>
</body>
if you mean underline of link for that you can use the method text-decoration for examplea{text-decoration:none} this code will remove any decorations of a tag so if you wanna use this function for all a tags you will write a{text-decoration:none} so if you wanna set decoration of specific tag you can give a class on the tag before you can change something example
HTML
go to stackoverflow
<a class="a-tag" href="https://stackoverflow.com">go to stackoverflow</a>
CSS
a{ //for all <a> tags
text-decoration:none
}
.a-tag{ // only for tag who have the a-tag class
text-decoration:none
color:black;
}
This works for me. The style of the text in the '.front-button a', not in '.front-button'
.front-button a {
margin: 0 20px;
font-family: 'Bebas Neue';
font-size: 20px;
color: red;
text-shadow: 2px 2px 3px rgba(241, 238, 53, 0.5);
}
link style
More about link styles:
https://www.w3schools.com/css/css_link.asp
How do I change link style in CSS?
I have a contenteditable span (display set to inline-block, so it doesn't act like a span, per se). I want the span to act like a password field on a linux terminal; you're typing, but you can't actually see it.
I've tried visibility: hidden and display: none, but both break the formatting and the text is still visible. Setting the color to the same as the background (black) makes the text invisible, but the caret is too.
I'd prefer for this to be done with CSS, but if it can't be done, I'll just use JavaScript. Here's my code:
.input {
display: inline;
}
body {
background-color: black;
}
#field-in {
color: #ffffff;
outline: none;
display: inline-block;
}
<div class="input">
<span id="field"><span id="field-name">Invisible Text:</span><span id="field-in" contenteditable> </span></span>
</div>
You can change the caret color so that the caret is shown:
.input {
display: inline;
}
body {
background-color: black;
color: white;
}
#field-in {
color: #000000;
caret-color: #ffffff;
outline: none;
display: inline-block;
}
#field-in::selection, #field-in::-moz-selection {
color: #000000;
background-color: #000000;
}
<div class="input">
<span id="field"><span id="field-name">Invisible Text:</span><span id="field-in" contenteditable> </span></span>
</div>
Two CSS properties:
color: rgba(0,0,0,0);
caret-color: red;
One CSS pseudo-element:
::-moz-selection { background: rgba(0, 0, 0, 0); }
::selection { background: rgba(0, 0, 0, 0); }
The caret needs a contrasting color so adjust accordingly with caret-color. The value rgba(0,0,0,0) is transparent black -- the fourth 0 is alpha (opacity). The selection highlight is the same color so if the user selects the text with the default color (blue in Chrome) the text would be not be revealed. Note, this will work with any color background.
.input {
display: inline-block;
}
body {
background-color: none;
}
#field-in {
outline: none;
color: rgba(0, 0, 0, 0);
caret-color: red;
display: inline-block;
}
#field-in::-moz-selection {
background: rgba(0, 0, 0, 0);
}
#field-in::selection {
background: rgba(0, 0, 0, 0);
}
<div class="input">
<span id="field"><span id="field-name">Invisible Text:</span><span id="field-in" contenteditable>Test</span></span>
</div>
When I hover over the div there is a white line on the outside of the div.
I've tried with text-decoration: none;
Any idea how to remove this?
This is the html
<a href="/" style="color:white">
<div class="headerOption">
<p>
Home
</p>
</div>
</a>
SCSS
.headerOption {
border-radius: 5px;
width: 6vw;
height: 2.8vw;
font-size: 0.97vw;
font-weight: 500;
#include normal;
font-family: "Rubik-Medium", sans-serif;
cursor: pointer;
p {
position: relative;
top: 30%;
}
&:active {
background-color: rgba(255, 255, 255, 0.1);
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
a:hover {
text-decoration: none;
}
You've actually got your CSS in the wrong order I think.
You're setting:
.headerOption a{whatever: somevalue;}
On:
<a>
<div class="headerOption"></div>
</a>
It's looking to style an anchor tag inside the div, but there isn't one.
See this example:
I have several boxes with white background and huge black, translucent box shadows that overlap the boxes above. However, this leads to an irritating behavior: While the white background gets darker through the overlapping box shadows, nested objects, like text or other boxes, don't!
Could anybody tell me why this occurs? I guess it has something to do with z-index. I would like prevent this - the nested objects should become darker as well. Any solutions?
Thanks in advance!
Here's the code: https://jsfiddle.net/xq20hvp4/3/
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
<div>Coloured text <span>Box with background</span></div>
CSS:
div {
margin: 20px;
box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.3);
font-size: 25px;
color: red;
font-weight: bold;
font-family: Consolas, Arial, sans-serif;
background-color: #ffffff;
}
div span {
background-color: #e7e7e7;
color: #555555;
font-weight: normal;
font-size: 17px;
padding: 1px 5px;
}
It's because those elements are on top of the div with the shadow. In order to put them behind, you can use position: relative; on the background element and give it z-index: 1:
div {
margin: 20px;
box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.3);
font-size: 25px;
color: red;
font-weight: bold;
font-family: Consolas, Arial, sans-serif;
background-color: #ffffff;
/* Add this */
position: relative;
z-index: 1;
}
div .box {
background-color: #e7e7e7;
color: #555555;
font-weight: normal;
font-size: 17px;
padding: 1px 5px;
}
Here's an updated fiddle: https://jsfiddle.net/6wwz8usw/.
https://jsfiddle.net/fd7tx2c2/
div {
z-index: 1;
position: relative;
}
Z-index
Position
I've got a basic layout that is a div with a thumbnail, floated left, then a div with some text in it (title, description, links) that floats lefts as well. They're meant to be side-by-side but as soon as the browser is too narrow, it pushes the 2nd div below the first, rather than just decreasing its width.
I can't believe I'm stumped on this as it seems really simple. I'd really appreciate some help!
html
<div class="stunting-video odd">
<div class="thumbnail">
<img src="https://i.ytimg.com/vi/LixKwLQiSGU/mqdefault.jpg" data-video-id="LixKwLQiSGU" class="show-video" alt="stunting video">
</div>
<div class="info">
<p class="title">GTA V - Stunt practise 03</p>
<p class="description">A play-through of a race created to practise a motorbike stunt in GTA V where you can jump from the docks to near the airport. Race is available here...<br>
<br>
<span class="highlight">PS3:</span> http://rsg.ms/0330f82<br>
<span class="highlight">Xbox360:</span> http://rsg.ms/4464ca5<br>
<br>
Special credits to Cheddar for the 360 version.</p>
</div>
</div>
css
body {
background-color: rgb(20, 20, 20);
color: rgb(238, 238, 221);
font-family: sans-serif;
font-size: 16px;
font-weight: 300;
margin: 20px;
}
a {
color: rgb(111, 178, 244);
}
.stunting-video {
background-color: rgba(255, 255, 255, 0.125);
border-radius: 30px;
box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.3) inset, -5px -5px 10px rgba(0, 0, 0, 0.9) inset;
clear: both;
margin: 10px 0;
overflow: auto;
padding: 5px 15px 15px;
}
.stunting-video .thumbnail {
border: 0;
cursor: pointer;
float: left;
margin: 10px 20px 0 0;
padding: 0;
}
.stunting-video .thumbnail img {
border-radius: 15px 0 0 15px;
}
.stunting-video .info {
float: left;
}
.stunting-video .title {
color: rgb(245, 215, 122);
font-size: 150%;
font-weight: bold;
}
.stunting-video p {
margin: 5px 0;
}
js fiddle example of the above
http://jsfiddle.net/yp7f0nz1/
All that is required is to not float the info div and (based on other comments) add adequate padding=left so that the text does not wrap around the thumbnail.
.stunting-video .info {
padding-left: 350px;;
}
Jsfiddle Demo
EDIT
I was reminded that a table would do this automatically and. of course, we have display:table / table-cell open to us.
Removing the floats and using
.stunting-video {
display: table;
}
and
.stunting-video .thumbnail {
display: table-cell;
vertical-align: top;
}
.stunting-video .info {
display: table-cell;
vertical-align: top;
}
JSfiddle Demo 2