I have inspected a lot of buttons using a technique where their icon
is defined by text through the "before" pseudo-element, something like
this:
element:before {
content: "\e604";
}
That code is suposed to draw a star.
I added that to my code, but the icon is not drawn.
.button {
text-align: center;
margin-bottom: 16px;
margin: 0;
padding: 0;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23);
border-radius: 50%;
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
display: inline-block;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
background-color: #00bcd4;
position: relative;
height: 56px;
width: 56px;
padding: 0;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.button:before {
content:"\e604";
}
http://jsfiddle.net/egeszqw6/
What should I do to make the icon appear?
Thanks in advance!
What is actually showing up is a font.
content:"\e604";
The statement above will just render the glyph (or char) that relates to the \e604 unicode.
So, unless you specifically have a font specified and included (Such as glyphicons or font-awesome, used by bootstrap) or a custom font made at sites like icomoon. It will not work. You need to specify the font-face!
In your example fiddle, you missed the class on the button. It should be this:
<div class="button admin__add"></div>
Other than that, you need to set the font-family in the .admin__add:before css
I created this fiddle, using font awesome as an example
Related
#hex{ } is not working ( have tried edge, chrome, opera works nowhere) while img#/#hex{}(which i found from chrome developer tools works everywhere)
here is my html code:
<img src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/118/bacon_1f953.png" alt="bacon-img">
<img id="#hex" src="https://emojipedia-us.s3.dualstack.us-west-amazonaws.com/thumbs/120/apple/325/broccoli_1f966.png" alt="broccoli-img">
here is my css code that doesn't work even if i tried img#hex or simply #hex
img{
background-color: rgba(0, 255, 0, 0.445);
border-radius: 20px;
}
img:hover{
background-color: transparent;
border-radius: 25px;
#hex{
background-color: rgba(255, 0, 0, 0.445) ;
border-radius: 10px;
}
here is my css code that works partially: as hover dosen't work on img#\#hex
However, I do not know how img#\#hex works or why does it work.
img{
background-color: rgba(0, 255, 0, 0.445);
border-radius: 20px;
}
img:hover{
background-color: transparent;
border-radius: 25px;
img#\#hex {
background-color: rgba(238, 255, 0, 0.445) ;
border-radius: 10px;
}
img 1 what is when it is not hoveredenter image description here
img 2 when hovered on first img enter image description here
img 3 when hovered over second img enter image description here
have I made some mistake somewhere or is there some problem in my code here or anything of that sort?
please tell me.
thank you in advance!
i was expecting :hover
to
work with img#\#hex
and give a transparent background while hovering!
# in css is a selector for ID, to fix your code change the id of the image to hex.
And make the proper changes to fix your css selectors
<img id="hex" src="https://emojipedia-us.s3.dualstack.us-west-amazonaws.com/thumbs/120/apple/325/broccoli_1f966.png" alt="broccoli-img">
Also consider removing the img selector, as the id should be unique you do not need the img part.
#hex {
background-color: rgba(238, 255, 0, 0.445) ;
border-radius: 10px;
}
I am able to use the transition attribute to make the width of a div change smoothly when switching from mobile to desktop view. I have two separate pages, index and about. When the user goes to the about page, the width of the div increases. I would like to animate this but I am not sure how since they are on two separate pages.
This is for my personal blog, running Apache2. I've tried using the transition element when the a tag is hovered over but this didn't work and looked weird.
div.container {
position: relative;
top: 50px;
width: 350px;
margin: 0 auto;
border-radius: 5px;
background-color: #f5f5f5;
vertical-align: middle;
transition: width 0.25s;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
When going to a different html page there is no transition animation.
I have a requirement of displaying multiple images in cards and I want to write some text over them. These are random images uploaded by users, so can be of any color. Need the white text on top of them to not be transparent as shown in attached fiddle.
This is an example fiddle - http://jsfiddle.net/7dgpbLd8/1/
This was my solution to add some gray div over image. But, the text should be always white on a gray background. But it is also shadowed here. It would be great to know how to shadow the actual background so text is readable.
Either follow Lee's advice (though I'd recommend adding some padding) or use text-shadow, like so.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
color: white;
text-shadow: 0 1px black;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
<div class="dark">Some text</div>
<div class="light">Some text</div>
Or you can ever merge our two approaches.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
span {
color: white;
text-shadow: 0 1px black;
background: #333;
background: rgba(0, 0, 0, 0.18);
padding: 4px 8px;
}
<div class="dark"><span>Some text</span></div>
<div class="light"><span>Some text</span></div>
The problem with your post is that you set the opacity. However, when you lower the opacity, not only does the background change, but also all its content. In other words, the text also has a lower opacity in your fiddle. In my fiddle, presented above, you do not have this problem because you use rgba. RGBA uses the default RGB color representation, but adds an alpha layer component to that (i.e.: opacity). This means that you can add a color that is (semi-)transparent.
It works in the same way as opacity, simply add the value you want for the color (let's say 0.8), and add it after the default rgb values. An example: RGB for white is 255,255,255 and for black 0,0,0. If you want those to have an opacity of 0.8, add 0.8 at the back: rgba(255,255,255,0.8) or rgba(0,0,0,0.8) respectively. By doing this, only the opacity of the background will change, and not that of the text. For an example, see the examples above.
I would put the image(s) in a div with a dark background, then lower the opacity of the images themselves, darkening the images so you can read the text. This way you can also darken the image on hover for better readability.
http://jsfiddle.net/3w34k1ea/
.img-wrapper{
width: 100%;
height: 100%;
background: #000;
}
img {
width: 100%
height: 100%;
opacity: .5;
}
img:hover{
opacity: .3;
}
p {
color: white;
position: absolute;
top: 15px;
left: 15px;
font-size: 20px;
}
I would use text shadow in your position but insteed of one I would experiment with multiples shaodws till reaching the best solution. For example:
text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1);
FIDDLE
The easiest way and best result at the same time is simply using a semi-transparent overlay, e.g.: https://jsfiddle.net/zmpwunr7
<div class="box">
<div class="overlay top">
text
</div>
<img ... />
</div>
.box {
position: relative;
}
.box .overlay {
background-color: rgba(0, 0, 0, 0.50);
color: rgb(255, 255, 255);
position: absolute;
}
.box .overlay.top {
top: 0px;
}
Put the text inside a <span> tag and give it a class, then in your CSS file:
span.your-class {
background:rgba(255,255,255,0.5);
padding:1em; // Adds a nice comfortable spacer between the text and the div edge
}
This will put the text inside a semi-transparent box ontop of the image.
Experiment with your text colour, and the background colour until you're happy.
Here's an example: http://jsfiddle.net/9svp8qoh/
There are some answers here that will help you make the text more readable. But they do not darken the background images which is what you asked for. You could achieve this by using css filters, e.g. the brightness filter:
img {
filter: brightness(20%);
}
A value of 0 means a completely black image, a higher value will bring you a brighter result. Example: http://codepen.io/anon/pen/OPqRJK
Attention: only Firefox supports at the moment the unprefixed version, IE has no filter support. See http://caniuse.com/#feat=css-filters
If you need to support these browser, have a look at the answer from BenSlight. It's basically the same solution.
For further reading: there's a nice article on css-tricks.com explaining all possibilities we have with css filters: https://css-tricks.com/almanac/properties/f/filter/
I had this scenario once. I compromised creating span with opacity 0.5 and giving dark background, and then placing the text. If I understood you question correctly this could be a solution for you.
You can add opacity only to background:
rgba(255,0,0,0.5)
Check this post
you can use background property of css where in you can give color and image path
eg :-
background:#FFFFFF url("image path");
This will add background color to image.
I was trying make a transparent text background and the background should fill as far as any character goes.
If I use display:inline-block both line gets the same background width so filling text background effect is missing and that's not what I am trying to achieve.
getting on top one another can be fixed by increasing line height, or setting the line height normal but that makes huge gap between lines. Well I would like to have both line very close. which in this case is 55px line height with font-size of 47px.
Markup here:
.main {
width: 500px;
margin: 100px auto;
background: green;
padding: 30px;
}
.test {
width: 450px;
}
.main h2 {
color: #ffffff;
font-size: 47px;
line-height: 55px;
}
.main h2 span {
background: rgba(0, 0, 0, 0.2);
}
<div class="main">
<div class="test">
<h2><span>A title about your dream kitchen</span></h2>
Read MOre
</div>
</div>
Check in jsfiddle: http://jsfiddle.net/srmahmud2/ze4kpmuy/
not sure can I make you understand or not. here a screenshot for quick look
http://postimg.org/image/efnmpoiy1/
Another option, using drop shadows, courtesy of this blog. Here is the style for the .main h2 span:
.main h2 span {
background: rgba(0, 0, 0, 0.2);
box-shadow: 10px 0 0 rgba(0, 0, 0, 0.2),
-10px 0 0 rgba(0, 0, 0, 0.2);
}
jsfiddle: http://jsfiddle.net/slushy/mu8rwcjp/
I have a div here with a button:
I want the contents of the div to be opaque while still keeping the semi-opaque background color.
The box will contain a menu.
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid #1F5899 ;
height: 200px;
width: 400px;
padding: 20px;
opacity:0.4;
background-color: #6AA6D9;
}
div.calcMenuContents {
opacity: 1;
}
The Run button is contained within the calcMenuContents div:
<div id="calculationMenu">
<div id="calcMenuContents">
<button onclick="runCalculations(2)" class="insideMenu">Run</button>
</div>
</div>
How may I make it so that the calcMenuContents are not semi-transparent?
Update: Thank you, BoltClock for the alternate solution (to set specific attributes of a div, instead of for the entire div).
My only issue is that the parent
There is a solution! Use rgba background values and you can have transparency wherever you want :
#calculationMenu
{
background: rgba(0, 0, 0, 0.4);
/*opacity: 0.4;*/
padding: 20px;
}
div.calcMenuContents
{
background: rgba(255, 0, 0, 1);
/*opacity: 1;*/
}
http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/1/
For text, you can just use the same rgba code, but set to the color property of CSS:
color: rgba(255, 255, 255, 1);
But you must use rgba on everything for this to work, you have to remove the opacity for all parent elements.
http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/2/
use rgba()
You can't really cancel out a parent element's opacity, but if the only parts of the parent element that will be semi-transparent are its background and its border, you can replace their hex colors with rgba() values based on the opacity you had given it, and remove the opacity declarations altogether:
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid rgba(31, 88, 153, 0.4);
height: 200px;
width: 400px;
padding: 20px;
background-color: rgba(106, 166, 217, 0.4);
}
you can change the background-color into an RGBA, so you would get:
background-color: rgba(106, 166, 217, 0.4);
If I'm right
You can't change the opacity of child elements. Try to use semi-transparent .png image as background of "calculationMenu" div instead of solid color background and opacity.