Is it possible to create the following without use of images, just using css3?
Yep. The relevant things you'll want to look up are gradients, text-shadow, and 2D transforms.
You'll need to do better with accepting answers to questions you've asked, and ask questions that show you've tried it yourself before you'll get better answers, most likely. People aren't going to give you the code if you've shown no effort to try to do it yourself.
Yes, it's possible.
CSS border-radius, gradients, text-shadow and #font-face will get you quite a bit of the way.
Those angled tabs are going to be a massive pain to get right, and likely to have cross-browser issues. You'll probably be able to get them right using CSS transform, but it'll require separate DOM elements for the edges, otherwise you'll transform your text as well.
The outward curves at the bottom of the tabs will also be tricky. I can't see an easy way to achieve that.
Assuming your aim is to do it without images, rather than simply as a CSS excersise, then a better solution might be to do it using SVG. You can incorporate SVG as elements within your page, so no separate downloads, and it should be fairly straightforward to achieve the results you want -- certainly much easier than with pure CSS.
SVG won't work in older versions of IE (IE8 and below), but since you're asking about CSS3, I assume that's not an issue for you. If it is an issue, then you can use a library like Raphael or SVG2VML to convert the SVG into VML on the fly for IE.
Related
The more and more we venture into the wonderful world of CSS3, the more and more we all get annoyed by the fact that these features require a MASSIVE amount of browser prefixes to allow compatibility with some older browsers. This problem becomes quite apparent even for small sites, where we need 4 or 5 CSS properties for the exact same effect. A common example would be the background property for gradients.
I know that there are scripts that can help with this issue, but before resorting to those, is there a pure CSS fix that would allow you to work around the prefix issue, or at the very least, some sort of method to keep the extra amount of typing to a minimum? That is, combining things, shorthand, whatever. CSS files can easily double with CSS3-rich content.
I totally agree to the excessive code need to accomplish the same effects in CSS3 but that issue is on the browsers side as other comments stated.
One design practice/tool/technique i think best to follow is using LESS when writing css.
I see the The possibility of over coming this issue (for now) with it. Checkout it out here. http://alittlecode.com/handling-multiple-css3-transitions-with-a-less-mixin/.
If you are not sure what is LESS then check this out - http://www.lesscss.org/.
Yes it is pure CSS from my perspective, but no as stated before, it won't reduce the size of files.
I am not sure how to exactly phrase this question so maybe that's why I can't find help with this.
I am coding a webpage and the designer has made a background for a part of it. It's sort of a two way gradient: both horizontal and vertical at the same time. I am attaching the image here because I'm not sure how to explain it.
I'm sorry if it's very obvious but I can't find anything resembling this anywhere. Thank you!
Here's the image:
EDIT: The question is, can I make this background using just CSS3?
Thanks!
Are you able to limit browser support to browsers that support multiple backgrounds?
If so, you can create two gradients, along with a border, to simulate that.
Here's a version that only works in Firefox: http://pastehtml.com/view/b295elnso.html
You can modify the webkit and other lines to get it working in other browsers. I used the Ultimate CSS Gradient Generator to build the lower gradient.
Here's a good listing of multiple background support.
(Edit: I meant only works in Firefox, not IE. Doh!)
*(Edit2: Added multiple background support listing)*
I'm just wondering what is the least expensive way to use a lot of gradients in a site's design.
I feel certain that CSS will be less expensive for the browser than SVG, but I could not justify this without tests. I would suggest that you create your page with your many gradients in CSS and if (and only if) you find performance to be a problem should you try SVG or other technologies.
I would lean more towards CSS for this one. Seeing as it is CODE rather than an image.
Also, if you are leaning more towards using CSS, why not make it viewable and or workable in IE 8 and below, via CSS3pie? http://css3pie.com/
This is an interesting question. In my personal experience webkit has been faster with svg, but I could be wrong.
I created a test fiddle with css transitions and they look about the same, perhaps someone with more experience can extend the stress case:
http://jsfiddle.net/KLCEw/
Keep in mind that SVG gradients are best embedded through data-uri's so they don't create new requests to the server.
There is, what I think is one of the best uses of CSS over images (the calendar icon) located at: http://chat.meta.stackoverflow.com/chats/transcripts/139?offset=120
But it doesn't work in IE8. Is it possible to convert this to work with IE?
I suppose we could use this jQuery code at: http://www.methvin.com/jquery/jq-corner-demo.html
I guess to summarize, there's no equivalent in IE of the -moz-border-radius property, eh?
You could look into PIE, it claims to bring CSS3 to the IEs:
CSS Level 3 brings with it some
incredibly powerful styling features.
Rounded corners, soft drop shadows,
gradient fills, and so on. These are
the kinds of elements our designer
friends love to use because they make
for attractive sites, but are
difficult and time-consuming to
implement, involving complex sprite
images, extra non-semantic markup,
large JavaScript libraries, and other
lovely hacks.
CSS3 promises to do away with all
that! But as we all know, due to
Internet Explorer’s lack of support
for any of these features, we must
be patient and refrain from using
them, and make do with the same old
tedious techniques for the foreseeable
future.
Or must we?
I'm looking at using it when it's time for my impending IE bugfix marathon.
Microsoft provides a list of links for Rounded Corners Solutions. The links includes great solutions for ie (not so great as border-radius of css3). I am sure you will find something for your needs.
I have been experimenting with the Majestic template at freecsstemplates.org. So far so good; I really like the look (or to be more specific, my boss really likes the look).
However, I am noticing that the CSS that drives this template seems very brittle; small changes can cause really radical breakage. In particular, if I reduce the size of the header in the CSS (to eliminate some of the empty space at the top of the page), both of the outside columns suddenly disappear.
With small websites, sometimes I cry uncle and just use tables for layout. I realize this is heretical; should I be leaving the design to the professional designers? Or maybe I'm going about this the wrong way, and someone can set me straight.
I honestly think this layout has been made pretty badly. The width of the elements seems to change where they appear on the page, and they're all need to be pixel perfect for everything to be centred.
For some bizarre reason the whole page has been placed inside the div element marked 'header'... This doesn't make much semantic sense for a start.
However, it seems if you decrease the width of every element which has one, then everything does get smaller, and nothing should disappear.
I would recommend looking at some other more sensible layouts, since I don't think this is a very good way of attaining that style -- as you've said, it's brittle. Have you tried using the extension Firebug for firefox? It allows you to make on-the-fly changes to the css, and see how it affects the style, which will help you learn fast.
CSS is delicate, but still easier to deal with than a site full of table layouts. I found Dave Shea's book CSS ZenGarden to be a great help in learning CSS from a designers perspective.
Often in layered templates there are a few places where changes to CSS can be made, and it can be really confusing to follow which selectors are controlling the element you wish to manage. There are many tools out there that can help, but some that have been useful to me are:
Google Chrome and its Inspect Element option
Selector Gadget - a bookmarklet that will help you visually determine the selectors that affect an element
Firefox's Web Developer plug in
One other tip is to learn about the !important modifier - it can come in handy to force a particular property setting when there are multiple CSS selectors affecting the same element.
CSS in my experience is easy to understand in concept, but takes a long time to master.
Brittle CSS can be very brittle, but good CSS can be wonderfully flexible.
As it stands CSS can either make layouts wonderfully simple and flexible or it can make the simplest of tasks an absolute nightmare.
Purists will tell you to use CSS no matter what, a pragmatist will tell you to use what works. If using a table or non-CSS solution makes something infinitely easier to do, then use it!
Personally I try to use pure CSS as much as possible, but there have been times when I want to do nothing but swear when something glorious in FireFox looks awful in IE. This is where the hacks come in. It is these hacks and work arounds that tend to make CSS brittle in the first place.
Half the problems with CSS would go away if all the browsers did precisely what the CSS spec says they should do. Alas, this is yet to happen so we have to live with either using tables, or on occassion, brittle CSS.
The best solution is to make the design as simple as possible. If you find you have a hundred divs and lots of CSS trickery to do something straight-forward, stop. Re-think how you are approaching it and try again.
At the end of the day your website users don't really give a monkeys what your website looks like as long as they can get at the information they want with minimum effort. Successfully manage that and they will not care how photorealistic that shiny nav bar is, or how well the borders line up etc.
That's my 18pence at any rate :)
I agree most css template is hard to read, and different people may have a very different approach to the same layout strategy. Since there are too many hacks/tricks/techniques in css it is really fragile when you try to modify those existing one since almost all cases, the styles are very dependent to each other.
Css doesn't break as long as you don't break it ;) It's a language. Just like a regular one, if you don't use proper grammar people won't understand what your saying.
If a layout doesn't work or suddenly your page looks rubbish, I'll guarantee you it's your fault. Css isn't brittle, the code you wrote with it might be.
So start by learning the basics and don't just dive into some file you found online which might (in your case, does) contain very bad code.
If you end up wanting to use tables for everything may I suggest you start looking at some grid systems like http://960.gs/ and ease your pain.
Gideon