I am just playing a little bit around with a landing page.
I just set a red opacity background on "A CATCHY PIECE OF TEXT".
How do I set the width on that the correct way, so I also have the responsive part in mind?
How can I get the font in front, and the red background in the back?
#cathyText {
background-color: red;
padding: 10px;
opacity: 0.1;
}
<h2 class="text-center" id="cathyText">A CATCHY PIECE OF TEXT</h2>
How can I get the font in front, and the red background in the back?
Use rgba():
#cathyText {
padding: 10px;
background: rgba(255,0,0,0.3);
z-index: 1;
}
The reason it works is the first 3 numbers set the red-green-blue of the color, and the last sets the opacity.
If you want to center your <h2> element, one way is to place it in a wrapper and change the display to inline-block:
#cathyText {
background-color: red;
padding: 10px;
background: rgba(255,0,0,0.3);
width:200px;
display:inline-block;
}
.catchy-text-wrapper {
width:100%;
text-align:center;
}
<div class="catchy-text-wrapper">
<h2 class="text-center" id="cathyText">A CATCY PEICE OF TEXT</h2>
</div>
use rgba() for background color
#cathyText {
background-color: rgba(255,0,0,.1);
padding: 10px;
/* opacity: 0.1; */
z-index: auto;
}
Related
I would like to have a colored underline that looks like this when it breaks:
text-decoration-color seems to be not supported widely enough.
I tried this:
.underline {
position: relative;
}
.underline:after {
position: absolute;
content: '';
height: 1px;
background-color: #ffc04d;
bottom: .1rem;
right: 0;
left: 0;
z-index: -1;
}
<h1><span class="underline">Sprouted Bread</span></h1>
What about a linear-gradient where it will be easy to control color, size and distance within a single element:
.underline {
position: relative;
font-size:28px;
background:
linear-gradient(yellow,yellow) /* Color */
left 0 bottom 2px/ /* Position */
100% 2px /* Size (width height)*/
no-repeat;
}
<div style="width:150px;text-align:center"><span class="underline">Sprouted Bread</span></div>
As a side note, border-bottom works fine used with inline element but of course you cannot easily control the distance to make it behave as a text-decoration:
.underline {
position: relative;
font-size:28px;
border-bottom:2px solid yellow;
}
<div style="width:150px;text-align:center"><span class="underline">Sprouted Bread</span></div>
Try this JSFiddle
By wrapping the elements like you have in a span. You can put the text decoration on the parent element and the text color on the span.
HTML:
<h1><span class="underline">Some Text</span></h1>
CSS:
h1 {
text-decoration: underline;
color: red;
}
.underline {
color: blue;
}
Just add a border!
Using display: inline, add a bottom border and space it with padding.
You could also use line-height and then place negative margins to increase the space in between the lines.
And...you could also animate it!
.underline {
position: relative;
padding-bottom: 1px;
border-bottom: 1px solid #ffc04d;
}
<h1 style="width: 5em">
<span class="underline">Sprouted Bread</span>
</h1>
As mentioned by #chriskirknielsen, you could use box-decoration-break, although not supported by IE or Edge. Credits: #Temani Afif
I have the following background image that is half gray, and half white.
When elements such as buttons, or text are on the dark side of the background, they appear behind it.
When elements are on the light side it appears in front of the background.
How can I get elements to appear in front of the dark side of the background?
Here is the button code, located outside of the body tag (which my background is located in)
<div class="container">
<div class="row">
<div class="col-xs-12" align="center">
Go
</div>
</div>
</div>
Here is the CSS for the button.
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
z-index:1000;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.customWidth {
width: 100px !important;
z-index:1000;
}
Here is the code for my background:
.background-picture {
background-image: url("../img/background.png");
background-size: cover;
z-index:1;
}
If you look very closely, you can see that the button actually is above the black part as well. (Depending on the quality of your screen and its calibration, you might actually not be able to see it, but I clearly do.)
The reason is that you have a transparent background color defined (a 60% transparent black) - that's why the "black" button appears grey-ish in front of the white background, but nearly invisible in front of the very dark background.
Simply change it to be an opaque grey, and you're done.
.btn-dark {
/* background-color: rgba(0,0,0,0.4); */
/* about the same color: */
background-color: #999;
}
Also, you definitely should change the font color of the buttons for the dark background to white or a very light grey.
main{position:relative;display:inline-block;border:1px solid red;}main > div{width:200px;height:150px; display:inline-block;}.white{background:#fff;}.black{ background:#000;}button{position:absolute;left:calc(50% - 50px);width:100px;border:none;color:#fff;border:1px solid #ccc;}
#one{
background:#999;
top:10px;
}
#two{
background:rgba(0,0,0,.4);
top:60px;
}
<main>
<div class="white"></div><div class="black"></div>
<button id="two">
Test with rgba color!
</button>
<button id="one">
Test with opaque color!
</button>
</main>
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
z-index:1000;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.customWidth {
width: 100px !important;
z-index:1001;
}
more the z-index is higer more the button is hover try this code
used background-color: rgba(0,0,0,0.4) for button and make the background black in cause the button will be black and not appear
you can add border or use different background color like gray red ..etc
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(30,30,30,0.4);
border:none;
z-index:10000;
border:1px solid gray;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.customWidth {
width: 300px !important;
height:30px;
display:block
}
<div class="container">
<div class="row">
<div class="col-xs-12" align="center" style="background:black">
Go
</div>
<br>
<div class="col-xs-12" align="center" style="background:white">
Go
</div>
</div>
</div>
It is not appearing behind the image, it is on the image only, your colour combination is such that you are seeing the buttons like that. However, if you check the same image uploaded by in some other system with maximum brightness you will see what I'm saying over here. I think if you can just change your colour combination everything will be fine.
I have a link on my website with borders.HTML:
<p id="hero4">Explore our menu</p>
CSS:
#hero4 {
border:1px solid white;
border-radius:5px;
width:150px;
height:30px;
margin:auto;}
I'd like the entire "box" to turn grey when a user hovers over it, like the "create yours" button on the Starbucks website. Right now, I have:
#hero4 a:hover {
background-color:grey;}
but only the small rectangular area around the text turns grey. How can I change my CSS so the entire area within the border changes color?
Then just set the hover to the #hero4:
#hero4:hover { /*removed a*/
background-color:grey;
}
You can use :hover for any element.
You can move the style from the <p> into the <a> tag, and also set it to display:block;.
#hero4 a {
border: 1px solid blue;
border-radius: 5px;
width: 150px;
height: 30px;
margin: auto;
display: block; /*added*/
text-align: center; /*extra: center text horizontally*/
line-height: 30px; /*extra: center text vertically*/
}
#hero4 a:hover {
background-color: grey;
}
<p id="hero4">Explore our menu</p>
Don't use hover over for anchor tag a, instead use it for the paragraph tag p, as p is the parent for the anchor tag.
Code
#hero4:hover {
background-color: grey;
}
EXAMPLE FIDDLE
Ok, so I am attempting to make a button but instead of using a fill color and changing the color on :hover I want to use an image as the background and change its opacity on :hover.
Here is a jsfiddle to sort of see what I am trying to do. The first button is the template im going off of, but its too boring for my taste.
I can create a button with the image as the background but when I set and change the opacity it obviously changes this for all child elements and I need the text to be unaffected. I also need it to be response with a 100% width so that it can resize with a containing grid on my website.
I have tried to create a container div that I placed the link text and an img src and tried to do position:absolute and position/relative but this breaks the container div. Im sure I am just overlooking something simple and have just been thinking about it for too long.
Essentially, I am having trouble stacking multiple elements in container div so I can target the :hover for the image and nothing else.
Any help is appreciated!!
UPDATE:
I figured out how to get what I was wanting, as seen here: http://jsfiddle.net/6EMNM/
HTML
<div class="cma-button-wrapper">
<a href="#"><div class="cma-button-header">Header Text</div>
<div class="cma-button">
<img src="http://breadedcat.com/wp-content/uploads/2012/02/cat-breading-tutorial-004.jpg" />
<p class="title">Bread Cat!</p></a>
</div></div>
CSS
.cma-button-wrapper {
width:250px;
}
.cma-button-wrapper img:hover {
opacity:.6;
}
.cma-button-wrapper a{
text-decoration:none;
}
.cma-button a{
/* force the div to properly contain the floated images: */
position: relative;
float: left;
clear: none;
overflow: hidden;
}
.cma-button img {
position: relative;
width:100%;
height: auto;
z-index: 1;
opacity: .2;
}
/*.cma-button img:hover {
opacity: .3;
}*/
.cma-button .title {
font-size:1.9em;
font-family: Helvetica, sans-serif;
font-weight: lighter;
display: block;
position: absolute;
width: 100%;
top:10%;
left: 0;
z-index: 2;
text-align: center;
}
.cma-button a {
color:#000;
}
.cma-button-header {
font-family: Helvetica, sans-serif;
font-weight: light;
font-size:.9em;
padding:.4em;
color:#FFF;
background-color:#FF7300;
}
This is close but how do I make it so that when you mouse over any child element of .cma-button-wrapper the img changes opacity but nothing else. Is this possible with pure CSS or do I need javascript? Thanks!
You have 2 ways and it will work with every browser:
.button-image:hover {
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}
Or you can create 2 images in photoshop. One "button_image.png" And one "button_image_hover.png" with transparency you want. Should be PNG.
Have a nice day!
My current project involves setting up a bunch of sidebar links, such that the finished design looks like this:
The envelopes are supposed to move and overlap (i.e., change z-index), depending upon which icon/text is currently has :hover state.
I thought each would be a separate PNG file, but I've been given a sprite that looks like this:
Any suggestions how I could achieve this? Normally I'd just change the background position of the list elements each piece of text is in, but I don't think this is possible given the overlapping nature of these. Does he just need to export it differently?
Many thanks...
To me it looks like that sprite would work perfectly. The left most image is for when book is hovered, second image for twitter, third for facebook, forth for email. I'm guessing the last one is just the default state. Its tricky to make this work with pure css and :hover (but possible!), however, it would be extremely easy with javascript.
For the pure css solution, the div with the sprite would have to be the child of all the text elements, so you could change the background based on :hover on the parent (the text). If this isn't clear, I can make you some example code.
Edit:
Its not perfect, but its a proof of concept.
JsFiddle: http://jsfiddle.net/jp6fy/
CSS:
#side{
position:relitive;
height:341px;
width:250px;
}
#link1{
top:0;
}
.link{
position:absolute;
left:0;
top:85px;
height:85px;
padding-left:160px;
width:90px;
}
#image{
position:absolute;
top:-255px;
left:0;
z-index:-1;
background:url(http://i.stack.imgur.com/I2Y4k.png) -720px 0;
height:341px;
width:150px;
}
#link1:hover #image{
background-position:-540px 0;
}
#link2:hover #image{
background-position:-360px 0;
}
#link3:hover #image{
background-position:-180px 0;
}
#link4:hover #image{
background-position:-0px 0;
}
HTML:
<div id='side'>
<div class='link' id='link1'>
email
<div class='link' id='link2'>
facebook
<div class='link' id='link3'>
twitter
<div class='link' id='link4'>
book
<div id='image'></div>
</div>
</div>
</div>
</div>
</div>
It is possible. (But ugly.)
As a :hover selector can only affect elements inside (or directly adjacent) to the triggering element, the solution is to nest the trigger elements: (jsFiddle)
<style>
div {
width: 100px;
height: 100px;
position: absolute;
left: 100px;
}
#image { background: black; }
#trigger1, #trigger1:hover #image { background: red; }
#trigger2, #trigger2:hover #image { background: green; }
#trigger3, #trigger3:hover #image { background: blue; }
</style>
<div id="trigger1">
<div id="trigger2">
<div id="trigger3">
<div id="image"></div>
</div>
</div>
</div>
But preferably, you'd get the envelope sprites exported separately (you can of course still use CSS sprites). That should give you simpler HTML and CSS, a smaller image, and you'll avoid having to muck around with nested absolutely positioned elements, each having its own coordinate system.
I tried an approach which keeps the markup fairly simple, with only one extra non-semantic div per item:
<ul>
<li id="email">
<div class="background"></div>
<em>Email</em> chris
</li>
<li id="facebook">
<div class="background"></div>
<em>Facebook</em> follow us
</li>
<li id="twitter">
<div class="background"></div>
<em>Twitter</em> your life away
</li>
<li id="book">
<div class="background">
</div><em>Book</em> a project
</li>
</ul>
I positioned all the different copies of the background div at the same place, then varied the background position based on the hover states:
/* First, just style the document and the list text in general.
skip on for the important bit */
body {
background-color: black;
color: white;
}
ul {
width: 350px;
margin-top: 40px;
position: relative;
}
li {
margin-right: 40px;
font-family: "Century Gothic", Helvetica, sans-serif;
text-align: right;
margin-bottom: 0px;
padding: 15px 4px 25px 0;
}
li em {
text-transform: uppercase;
display: block;
}
li:hover {
color: red;
}
/* From here down is the important bit */
/* Set up the sprite in all the .background divs */
div.background {
background-image: url(http://i.stack.imgur.com/I2Y4k.png);
position: absolute;
top: 0;
left: 0;
height: 341px;
width: 160px;
}
/* By default, turn off the background in all the divs */
div.background {
display: none;
}
/* Just picking an arbitrary item to show the default, non-hover background */
#email div.background {
display: block;
background-position-x: -737px;
}
/* If we're hovering over the list as a whole, disable the default background,
so it doesn't show up underneath the background we want to display */
ul:hover #email div.background {
display: none;
}
/* For the email item, which shows our arbitrary default background, override
to the email background on hover with more specificity than the default rule */
ul:hover #email:hover div.background {
display: block;
background-position-x: 0px;
}
/* For all other items, override to their background on hover */
#facebook:hover div.background {
display: block;
background-position-x: -375px;
}
#twitter:hover div.background {
display: block;
background-position-x: -189px;
}
#book:hover div.background {
display: block;
background-position-x: -556px;
}
Working, though slightly rough example, in this jsFiddle.
Note that it's okay to have multiple copies of the sprite in multiple different divs; the browser will just grab one copy for its cache and use that for all instances of the image.
Could you create an image map and then hover swaps the image to the one with the correct envelope in front. See this link on an interesting link
google search link on idea
My method with clean HTML.
.nav { position: relative; }
.nav li {
margin-left: 179.8px;
list-style-type: none;
}
.nav li:before {
position: absolute;
left: 0; top: 0;
content: url(http://i.stack.imgur.com/I2Y4k.png);
clip: rect(0 899px 341px 719.2px);
margin-left: -719.2px;
z-index: 1;
}
.nav li:hover:before { z-index: 2; }
.email:hover:before {
clip: rect(0 179.8px 341px 0);
margin-left: 0;
}
.facebook:hover:before {
clip: rect(0 359.6px 341px 179.8px);
margin-left: -179.8px;
}
.twitter:hover:before {
clip: rect(0 539.4px 341px 359.6px);
margin-left: -359.6px;
}
.book:hover:before {
clip: rect(0 719.2px 341px 539.4px);
margin-left: -539.4px;
}
<ul class="nav">
<li class="email">Email</li>
<li class="facebook">Facebook</li>
<li class="twitter">Twitter</li>
<li class="book">Book</li>
</ul>