I was designing a nav bar button, when I got a specificity conflict in the opacity. I used the !important override, but that doesn't seem to be working. Any clues as to the reason?
HTML:
<body>
<div class="container">
<span id="text">Lorem Ipsum</div>
</div>
</body>
CSS:
.container {
background-color: #000;
opacity:0;
height: 30px;
width: 122px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position:absolute;
top:40%;
left:43%;
}
#text {
color: #fff;
-moz-user-select: none;
-webkit-user-select: none;
font-family: Courier;
position:absolute;
top: 5px;
left: 5px;
width: 122px;
opacity:1; !important;
}
body {
background-color: #808080;
}
After this all I get is a blank gray background (due to the background-color styling). I know it makes much more sense to not nest the span in the div, but I need to do that for animation purposes.
must be like that :
opacity:1 !important;
no ; before !important
if .container have opacity:0 then all elements inside this div will not be visible, even if you add opacity:1 !important; to #text
First
Declare !important write this opacity:1 !important; instead of this opacity:1; !important;.
Second
you define Opacity to #text parent that's why it's take it's parent opacity. So, instead of opacity you can use RGBA().
Write like this:
.container {
background-color:rgba(0,0,0,0);
}
Filter for IE
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000); /* IE6 & 7 */
zoom: 1;
Related
how can I create a button animation like this using css?
what I want to achieve
I want to display only first letter of button, and when hover it expands and shows rest of letters.
maybe something like:
<button>h<span>ello</span></button>
and css:
button {
width: 40px;
height: 40px;
border-radius: 50%;
}
button span {
display: none: /* maybe hide it first? */
}
but when I change the width it looks like a stretched circle because the radius. Whats the best approach to modify the width but keep the same border radius?
Thanks,
AH.
Firstly, you shouldn't use border-radius of 50%, that would make an oval when the width is larger than its height, you should use a fixed value, such as 30px.
Secondly, you shouldn't fix height and width, you should set the padding, so that the text won't run out of the button.
Thirdly, to change the content, you could use the content property.
In the code, I used :after, which adds "ello" after "H" on :hover.
button {
padding: 15px;
border-radius: 30px;
}
button:hover:after {
content: "ello";
}
<button>H</button>
Instead of using a nested <span>, I recommend using the :after CSS selector, to show the rest of the button's label. You will want to use CSS3 transitions for a smooth hover animation. I combined the :after selector with the transition, and a :hover opacity of 1, so that the button text appears simultaneously as the button expands.
button {
width: 50px;
height: 50px;
border-radius: 10px;
padding:6px;
background-color:black;
color:white;
font-size:1.03em;
box-shadow:3px 3px red;
}
button:hover {
width:100px;
height:50px;
border-radius: 10px;
padding:6px;
background-color:black;
color:white;
transition:all 0.4s ease 0s;
font-size:1.02em;
box-shadow:3px 3px blue;
}
button span {
opacity: 0;
}
button:hover span {
opacity: 1;
transition: all 0.3s ease 0s;
}
button:hover span:after {
content:"ello!";
}
<button>H<span></span></button>
You can define a border-radius value in px, em, or rem. Using % will create an ellipse.
You can avoid additional markup by using the ::first-letter attribute.
Example...
button {
background: black;
color: transparent;
font-size: 3rem;
border: 0;
border-radius: 2.5rem;
width: 5rem;
height: 5rem;
padding: .5rem 1.5rem;
}
button::first-letter {
color: white;
}
button:hover {
width: auto;
color: white;
}
<button>Hello</button>
Simple Use of the :hover tag below /
CSS:
.button {
background-color: pink;
}
.button:hover {
background-color: blue;
}
HTML:
<h3 class="button"> Hello, World! </h3>
Can you make round cap underlines (as in the above image) with CSS? How?
Is there a way to do this with border-bottom? border-radius produces this stylish effect instead:
EDIT: I missunderstood what hpique wated, but this should work:
#test {
font-size: 50px;
background: transparent;
border-radius: 10px;
height: 10px;
width: 255px;
box-shadow: 0 55px 0 0 #000;
font-family: sans-serif;
}
<div id="test">Hello world</div>
Basically I'm putting the text on a div, and the box shadow will be of the same size as the set height and width for that div, just play with the height/width and you should get what you want...
JSBin Demo
Screenshot from the Demo:
Yes, it’s possible. Add a block element using :after with no content and give it desired width/height like so:
h1:after {
content:"";
float:left;
background:green;
width:100%;
height:6px;
border-radius: 3px;
}
Fiddle here: https://jsfiddle.net/toqL0agq/1/
I tried doing this same thing with the accepted answer, but found I was still getting the undesired result shown in the question. You can achieve this with a psuedo class:
HTML:
<span class="kicker">Hello World</span>
CSS:
.kicker {
font-size: 1rem;
position: relative;
&:after {
content: '';
display: block;
width: 100%;
height: 6px;
border-radius: 6px;
background: #000;
position: absolute;
bottom: 0;
left: 0;
}
}
One of the tricks i just learned is instead of working with div borders try adding an :after selector to the heading like :
h1:after{
content: " ";
display: block;
width: 1.5em;
height: .2em;
background-color: #f0860c;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>test</h1>
</body>
</html>
No. If you want to do this purely with HTML+CSS you would need a secondary element to sit beneath the text, and then apply curvature and background colour to that. Alternatively, and cringe-worthy, in my opinion, you could use an image.
Like youtag's answer, my solution uses pseudo-elements—but my underline only runs the length of the text and can wrap onto multiple lines (with an underline running beneath each line of text).
Basically, I manually cap the ends of the element's border with pseudo-element circles before and after the element:
h1 a {
text-decoration: none;
position: relative;
border-bottom: 15px solid;
padding-bottom:3px;
}
h1 a:hover, h1 a:focus {
border-bottom: 15px solid #eb6d32;
}
h1 a:before, h1 a:after {
content: '';
height: 15px;
width: 15px;
background-color: currentColor;
border-radius: 15px;
position: relative;
display: inline-block;
vertical-align: text-bottom;
margin-bottom: -18px;
}
h1 a:before {
left: .2ex;
margin-left: -.4ex;
}
h1 a:after {
margin-right: -.4ex;
right: .2ex;
}
I use left and right on the pseudo-elements so the ends don't stick out too far past the text.
See my codepen.
you can do that by using a div beneath the text and setting its border-radius to 2000px. i think that will be simpler
HTML:
<div class="wrapper">
<span>Hell World</span>
<div class="underline"></div>
</div>
CSS:
.underline{
height:0px;border: 3px solid black;
border-radius: 2000px;
}
.wrapper{
display:inline-block;
}
JQUERY SNIPPET:
var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)
So I am having a problem. I have looked around and looked around but no luck. I would like to make the background of my body transparent but leave the text non transparent. As it is right now I keep making both the same opacity. Here is my code:
#charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
opacity:1;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 750px;
margin: 0 auto;
}
.content {
padding:20px;
width:710px;
position:relative;
background:#CCC;
opacity: 0.5;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.header {
top:0%;
width: 750px;
height: 200px;
background-image: url(images/header.png);
background-repeat:no-repeat;
background-position:center;
}
.navbar {
height: 50px;
width: 750px;
position: relative;
z-index: 2;
}
#bg {
position: fixed;
top: 25%;
left: 15%;
z-index: -1;
}
div {
display: block;
}
Here is my website (click the link dont type "tccraft.net" in your url it will take you to a facebook page): http://tccraft.net/index.php
Thank you!
Don't use opacity for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this.
.content {
padding:20px;
width:710px;
position:relative;
background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
background: rgba(204, 204, 204, 0.5);
}
See http://css-tricks.com/rgba-browser-support/ for more info and samples of rgba-values in css.
For a fully transparent background use:
background: transparent;
Otherwise for a semi-transparent color fill use:
background: rgba(255,255,255,0.5); // or hsla(0, 0%, 100%, 0.5)
where the values are:
background: rgba(red,green,blue,opacity); // or hsla(hue, saturation, lightness, opacity)
You can also use rgba values for gradient backgrounds.
To get transparency on an image background simply reduce the opacity of the image in an image editor of you choice beforehand.
opacity will make both text and background transparent. Use a semi-transparent background-color instead, by using a rgba() value for example. Works on IE8+
Use alpha value instead of using opacity. See code below:
background: rgba(255,255,255,0.2);
If you use RGBA for modern browsers you don't need let older IEs use only the non-transparent version of the given color with RGB.
If you don't stick to CSS-only solutions, give CSS3PIE a try. With this syntax you can see exactly the same result in older IEs that you see in modern browsers:
div {
-pie-background: rgba(223,231,233,0.8);
behavior: url(../PIE.htc);
}
To make the background of your body transparent please try this style, it worked for me, add "ad" at the end of your desired color code
background-color: #42413Cad !important;
I would add Hex color code for transparency
background-color: #42413C+hexcode
https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
It would be somethin like this:
background-color: #42413C2E
It is equal to that color + 18% alpha
I found a way with z-index.
The watermark class (you can use an example from #19531361) does the job. All input tags are non transparent, but they sit "behind" the watermark. To make them active, use following css modifications (inputs are then "on top").
input {
position:relative;
z-index:10;
}
.watermark {
position: absolute;
opacity: 25%;
z-index:0;
}
box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.54);
I've got a simple CSS/HTMl question. I've got an image and some text in a div. I've got the text positioned on top of the image using the z-index.
The text is white with a black background. I adjusted the text's div's opacity, so that the image beneath it is visible. It looks good.
The problem is that the text appears gray instead of white, because the opacity is lowered. How can I make the text appear white, and still have a semi-transparent black background around it?
<style type="text/css">
.wrap {
position:relative;
float:left;
clear:none;
overflow:hidden;
}
.wrap img {
position:relative;
z-index:1;
}
.wrap .desc {
display:block;
position:absolute;
width:166px;
top:20px;
left:20px;
z-index:2;
color: #FFFFFF;
padding: 10px;
background-color: #000000;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
/*For IE*/
filter: alpha(opacity=60);
opacity: 0.60;
}
</style>
<div class="wrap">
<img src="path/to/pic.png" />
<h6 class="desc">This is my text about my image</h3>
</div>
Any suggestions?
How about like this:
CSS
.mod {
position: relative;
width: 80px;
height: 100px;
padding: 5px;
}
.mod-text,
.mod-background {
position: absolute;
left: 0;
width: 100%;
}
.mod-text {
color: #FFF;
font-size: 1em;
text-align: center;
bottom: 0;
}
.mod-background {
background-color: #f58322;
border-radius: 8px;
filter: alpha(opacity=60);
opacity: 0.60;
top: 0;
height: 100%;
}
HTML
<div class="mod">
<img src="http://www.gravatar.com/avatar/d543f6789b58df56f6fed95291e78261.png" />
<div class="mod-background">
</div>
<div class="mod-text">
Hawt!
</div>
</div>
Plnkr
http://plnkr.co/edit/aSd9rO?p=preview
Depending on your browser support requirements, you might be able to get away with leaving opacity at 100%, and using an rgba color:
background-color: rgba(0,0,0,0.5);
The colors are Red, Green, Blue, (0-255 each) followed by Alpha (0-1.0).
If you need a fallback in older browsers, you can usually use:
background-color: #000;
background-color: rgba(0,0,0,0.5);
This will default to Black for older browsers, and semi-transparent for newer ones. It avoids an extra download (of a tiling image), as well as keeping more of your styling in the text file (easier to version, maintain, and find).
I would create another div before the description with the same height and width, set that div's opacity to transparent, add a background, then put the description in another div, without a background. If they both have absolute position, then the latter should go on top of the former.
See the demo here.
You can put a semi-transparent image in the background of the element instead. The actual image can be very small and you can repeat it to cover the whole background.
.wrap .desc {
display: block;
position: absolute;
width: 166px;
top: 20px;
left: 20px;
z-index: 2;
color: #FFFFFF;
padding: 10px;
background: url('my-small-bg.png');
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Here's an example of what this could look like: http://jsfiddle.net/f6XS6/1/
When I am trying to set opacity in css, mouse over event is not getting fired. my css code is-
.dropmenudiv_a{
position:absolute;
top: 0;
border: 1px solid white; /*THEME CHANGE HERE*/
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:100;
background-color: lightgray;
width: 200px;
visibility: hidden;
opacity:0.9;
filter: alpha(opacity = 50); // for IE
}
.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
background:url(media/menuover.jpg) repeat-x top;
color: white;
}
background image on mouse over is getting changed in MOZILA but not in IE?When I remove filter: alpha(opacity = 50);, it is workin fine in IE also but then opacity is not coming in IE......????
For IE you have to remove/reset the filter style, like this:
.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
filter: none; /* resets the filter */
background:url(media/menuover.jpg) repeat-x top;
color: white;
}
Tried it in IE8 (Windows 7) with success.
What you're probably seeing is the IE bug where links within a container that has a filter applied become unclickable and unfocusable.
A fix that sometimes works is to add a z-index to your links:
.dropmenudiv_a a {
position: relative;
z-index: 1;
}