I really don't know how to name my problem but I have a psd file that looks something like this:
Every item in the image above is a single image like this one:
I don't have a good specification about this, that's all I know about it. So I have been thinking maybe I can use the whole image as sprite background.
Please share your thoughts how to achieve something like this and if you are familiar please edit the question name precisely cause I could not.
Thanks
Here is an great article which accomplishes this using text-shadow: 7 Great CSS based text effects using the text-shadow property
Here is an example how it looks: Hello World example
Code:
h1 {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
color: #9c8468;
opacity: 0.3;
font: 80px 'Museo700';
}
I didn't include the right font, but you get the idea.
This is what you do... I just did this in Photoshop, and the results are pretty good. It can be duplicated in CSS.
<img src="http://i.stack.imgur.com/o1z9H.png" id="front"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="middle"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="back"/>
Each of those images should be a different color. Front, as it is. Middle, dark gray, and back, white.
Use CSS is place them in the same spot, but offset by a couple of pixels.
#front {
top:5px;
left:5px
}
#middle {
top:3px;
left:5px
}
#bottom {
top:7px;
left:5px
}
CSS now has filters. (not yet fully supported)
view example
view notation
You can use drop-shadow
box-shadow even with transparent .svgs kept the retangular shadow.
works like text-shadow but for vector images (.svg)
side note: Since it's not yet fully supported, use an image editing software.
Related
I am learning Ruby on Rails to create a website, and I am looking for a way (preferably most conventional one) to create white rectangles that will cover the back of texts only (To make it easier to read).
I have good previous knowledge of java, C and python like languages however I am completely unfamiliar with RoR, HTML, CSS.
I simply finished the following blog tutorial and just added a background.
http://guides.rubyonrails.org/getting_started.html
Therefore I don't have any relevant code to share, its just the basic stuff.
I would also appreciate further tips on how to have better control over the figures I will draw (how to make corners slightly rounded, how to make the rectangle size slightly larger than the text size etc.)
It feels like you want to draw a poster as if using Adobe Illustrator or something like that.
For WEB design, you shouldn't reason like this. Think of your webpages mainly as a collection of containers that squeeze and adapt to your content.
create white rectangles that will cover the back of texts
This is just going to be the background of your containers. But if you really want something that is only covering the letters, you could try something like
HTML :
<span class="white-shadow">Your text</span>
CSS
.white-shadow{
background: white;
}
make corners slightly rounded
It's a CSS property called
.your_class{
border-radius: 2px 2px 0 0; // Round corners of 2px radius for top left/right corners
}
make the rectangle size slightly larger than the text size
You actually want to add some padding to your containers
.container{
padding: 5px 10px 5px 10px;
}
If you don't understand any of this, I strongly recommend you to follow a HTML/CSS tutorial.
I see I'm a few minutes late to this party, but just in case this helps:
<!DOCTYPE html>
<html>
<head>
<title>SO30947882 Test</title>
<style>
body { /* The entire page's <body> element */
background-color: gray;
}
* { /* Every element */
color: black;
}
.my-text { /* Elements with this class property */
background-color: white;
padding: 2px;
line-height: 1em;
margin: 0 1px;
border-radius: 2px;
}
</style>
</head>
<body>
<p>Hard to read this.</p>
<p class="my-text">Easier to read this, in a block.</p>
<p>
<label>Dark text.</label> <label class="my-text">Better text, inline.</label><br/>
<label>M<span class="my-text">ixe</span>d T<span class="my-text">ex</span>t.</label>
</p>
</body>
</html>
This is some really fundamental CSS style definition stuff. CSS selectors (like body and .my-text here) are incredibly powerful, since they naturally combine.
Happy styling.
I'm using PrinceXML to create PDF reports in my .Net application. I've created the report in HTML and it has few areas with background color. But when generating the PDF report using PrinceXML, those background colors are missing. I've tried replacing the background color with background image with width and height. Still they're not showing. It's like it has completely removed that CSS area.
Anyone came across any issues like this before? The PrinceXML documentation mentions that they support the background color and image.
Background Color
Prince seems to recognise border-color, but not color (text color) or background-color or background-image.
You can simulate a background color by using an after pseduo-element and a thick border. Prince renders this correctly.
CSS
.bgRED:after {
content: "";
display:block;
border-top: 25px solid red;
margin-top: -25px;
}
.bgRED-ib {display: inline-block;}
HTML
<p class='bgRED'>This is a p with a red background</p>
<span class='bgRED bgRED-ib span6'>This is a span with a red background</span>
This requires that you know the height of the element in pixels to make it work.
Background Images
I'm trying a similar thing with making a background image 'water-mark' across the whole page
Prince ignored CSS like this:
background-image: url(HUGE_sunset.jpg)
However I managed to get it to work using something like this:
HTML
<img class="behind" src='HUGE_sunset.jpg'>
<div class="infront">
<p>with the lights out, it's less dangerous, here we are now entertain us </p>
</div>
CSS
.behind {position: absolute; width:100%; height:100%; z-index:1;}
.infront {position: absolute; z-index:500;}
In the Prince docs it mentions that background-color defaults to transparent, and that color defaults to black. On a whim I tried adding the !important directive to my color/background-color styles and it worked.
I do not know what Prince has applied as its default style selectors in these cases, but it appears that it either applies its base styles after (or with some other more specific selectors) that necessitates this unpleasant !important war.
Without any way to inspect the applied styles it's a bit opaque, or I'd definitely recommend going a different route. Fortunately in my case the styles I need are specific to the Prince-generated pdf only. If you have styles you need to use both for Prince and web, I'd recommend posting it as a bug in the Prince forum and hope they fix it.
Here is a css of backgorund image for Prince Pdf
<style>
#page{
background: url(background.png) #ffffff;
-webkit-background-size: 100%;
prince-background-image-resolution: 72dpi;
background-position: 0px 0px;}
</style>
by the way if you want to use bootstrap , use version 3.7
I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:
This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.
Here is the code I've been working with:
<STYLE type="text/css">
.mini_banner
{
display:inline;
border-bottom:30px solid blue;
border-left:0px solid transparent;
border-right:30px solid transparent;
}
</STYLE>
I wanted to apply this to a cell in a table. I also don't want to break compatibility with modern browsers. My "customers" (mostly internal people) are going to be primarily on IE8 or later but I don't want to limit myself if I can help it.
So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?
I would say that you'll have less headaches all the way around if you revert to using a single background image - in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:
.minibanner {
background: blue url(..images/notch.png) no-repeat middle right;
font-size: 1.5em;
}
The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.
If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.
UPDATE:
The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:
<div>
<p>Hello text</p>
<span></span>
</div>
Then in your CSS:
p {
background: blue;
color: white;
float: left;
padding: 0 20px;
height: 50px;
margin:0;
line-height: 50px;
}
span {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 0px solid transparent;
display: inline-block;
border-left: 50px solid blue;
}
See this JSFiddle.
The shape is based on this tutorial on CSS triangles. Now, I've only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.
I made it work without an extra span: jsFiddle
.mini_banner
{
width:18em; height:1.5em;
color:white; font-weight:bold; padding-left:0.5em;
margin-bottom:.5em;
}
.mini_banner:before {
display:inline-block; content:''; overflow:hidden;
width:17em; height:0;
margin-bottom:-1.5em; margin-left:-.5em;
border-bottom:1.5em solid blue;
border-right:1.5em solid transparent;
}
Tested in FF, Safari, Opera and IE. (Works in IE8, but not in IE7)
I wanted to know what code is used to make a background like this http://www.wareztuga.ws/
What if i want to make a to put a header like that? What code should i use?
I appreciate you help
Not sure what you mean by "different layers".
Do you mean how the flags change from dim to bright? They are just using css3 opacity filter
Something like this:
.class{ filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0; }
.class:hover{ filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7;
If you want to have an image change when you hover over it, you can use the css background-postion filter.
Let's say you have an image that is 20px Wide and 20px High. In photoshop, double the canvas height, and put second image above it. Then in css do something like:
.class{ height:20px; width:20px; background:url('your/image.png'); background-position:0px 0px; }
.class:hover{ background-position:0px -20px; } //or 20px depending on what way you want to move your background image.
Still now sure if that answers your questions.
Otherwise, the "layers" are just divs with background images set. And then children divs with different images set.