How can i make a fading text inside
<div class="box">
<p>some text, some text</p>
<div class="fading"></div>
</div>
.box {
width: 200px;
}
.fading {
background: url('img/fading.png') no-repeat 0 0;
}
but what if i have not a white background for example like here: http://beta.ruh.kz (ПОПУЛЯРНЫЕ СТАТЬИ - called block with text)
How can i do a png fading trick if there's not a white background?
Your Question is hard to understand but i am trying to help you.
if you want to fade image or text use fading{opacity:0.7;} you can change the value accordingly.
or if you want to use an image on coloured background you need to make a transparent png image as in the reference site ...
On this pages:
http://webdesignerwall.com/tutorials/css-gradient-text-effect
http://css-tricks.com/text-fade-read-more/
There are tutorials for your problem
Related
I tried webfilters to change the white background of this image looking at this:
Change color of PNG image via CSS?
Not sure if this is the way to change the whitebackground of this image:
http://i.stack.imgur.com/AZRrE.png
Is it possible to change this through css?
You need to use a png that has a transparent background - the one you are using has a white background. For example.
.red {background-color:red;}
.blue {background-color:blue;}
.green {background-color:green;}
<div class="red"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
<div class="blue"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
<div class="green"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
If you do a search for radio button png you should be able to find a better one than the one I have used (as mine has some rough edges that are showing up)
Is it possible to change this through css?
No. If the image had some transparency, you could change the background-color (and/or background-image) of its parent element, like so:
<span class="thing"><img src="your-semi-transparent-image.png"></span>
And in the CSS:
.thing {
background-color: aqua;
/* This will show through the transparent region of the image */
}
I would like to make a background image for one of my images. The background image is transparent and can be seen at http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png (and I'm pretty sure I have the correct url relative to the document in the code) and the idea is just that one you hover over the images, you can see the view site background image. Before I move the background image to a hover class and center it on the image, I wanted to make sure it works properly just as a background image but it isn't showing up.
My code is
<img style="float: left; margin-bottom: 20px; background-image: url(images/view_site.png)" src="images/white_house_website.PNG" width="490" height="231" alt="White House Website">
My website with the issue is here and the image with the problem can be found if you scroll all the way to the bottom. It is the white house image.
u can view my working solution in jsfiddle:
http://jsfiddle.net/avi_sagi/Ea78j/3/
CSS Rules
.thumb{
width:490px;
height:231px;
background:url('images/view_site.png') no-repeat center;
background-size:100%;
}
.thumb:hover .view_site{
width:490px;
height:231px;
background:url('images/white_house_website.PNG') no-repeat center;
background-size:128px 128px;
}
if your css is in external stylesheets remember to change the url of the background image or mention absolute url to be safe.
HTML
<div class="thumb">
<div class="view_site"></div>
</div>
It is actually working. the image is covering up the "Veiw Site" image.
Because its the background.
i removed the top image via google chrome...
What you want to do is set the "View Site" image as separate div as child of a div around the image.
and set it to appear on hover.
something like
http://jsfiddle.net/hWcMK/
CSS:
.imagebox:hover .viewsite{
display:block;
}
.viewsite{
width:125px;
height:125px;
background-image: url("http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png");
margin-top:-150px;
position:absolute;
display:none;
}
and the HTML:
<div class="imagebox">
<img src="http://webmaster.tsaprotectandserve.com/new_design/images/abc_website.PNG" width="80%"/ >
<div class="viewsite"></div>
</div>
I've been put in charge of redesigning our communities Sponsor page, Currently this is what it looks like, http://core2062.com/sponsors/ and now I've redesigned it using Flexboxes: https://diedrich.co/img/uploads/de9ea0e2569a8051f8703c99d637f85b.jpg
My question is...How do I Put text in the bottom border I created around each image?
You can't put text in a border. Use a background color on the element holding the text and apply a border(if required) to that
Demo
HTML
<div class="border">
<h1>Diamond Sponsors</h1>
</div>
CSS
.border {
background-color: black;
color:white;
border-top:5px solid orange;
text-align:center;
}
You can't put text in a border.
You can either make an element with a background color and put the text in that or absolute position the text on top of the border.
I have a div (class="sidebar") that I want to display on the right hand side of my content area. I've set the content area as the container, then placed the sidebar inside that, specified height, width, background color and floated it right.
It's displaying in firebug, but not appearing on the screen.
I'm currently learning CSS so any tips/advice on what I'm missing are welcome.
Any advice available will be gratefully received.
Thanks in advance,
Tom Perkins
You can view my code here:
http://jsfiddle.net/tomperkins/v3yqf/
Because HTML elements have transparent background color by default. Giving the element a background color and you can see it immediately:
.sidebar {
background: orange;
}
See: http://jsfiddle.net/v3yqf/3/ ( http://jsfiddle.net/v3yqf/3/embedded/result if your screen is narrow)
Try placing your sidebar div before your content div. Also, you will see it better if you specify background: green instead of color: green ;)
Edit:
So, use
<div class="sidebar"></div>
<div class="content"></div>
instead of
<div class="content"></div>
<div class="sidebar"></div>
I have an element with a transparent png as its background image - it's like a polaroid with the photo bit cut out so just the frame is showing.
With this as the background I then want a standard image to sit behind the element that has the transparent png background - to fit inside the frame.
i've tried setting z-indexing and opacity and although I can get the image to show through its obviously transparent because of the opacity settings.
Any ideas?
If .yourPhoto is a background image, you could do this:
<div class="yourPhoto">
<div class="yourPNGframeImage">
</div>
<div>
Or you could use inline images and position both absolute:
<div class="container">
<img class="yourPhoto" src="">
<img class="yourPNGframeImage src="">
</div>
.container {position: relative;}
.yourPhoto, .yourPNGframeImage {position: absolute; top: 0px; left: 0px;}
there is a fair few things to look out for when doing PNG.
when cutting make sure you
background is off.
export as png24.
if your in ie6 you will need to use someting like twin-helix png fix
http://www.twinhelix.com/
Try these steps. You should not have to change the opacity of your image as it will affect the whole image. When you use z-indexing you should also put in the position css element