I see a lot of designers that make shapes on the website. For example, a curvy purple line like shown in here: https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs3/146762996/original/c5c40fc15550b852236414d3984f178e6b976e51/create-a-unique-and-creative-website-for-your-brand.png
My question is, assuming that I am a front-end developer and my boss gives me the files from the designer and asks me to implement this design into the website, how do I do that?
Is it just a one picture that I will get in many different width's and will have to use as a background and fit the text in with breakpoints?
Sorry if that sounds like a stupid question, but I always wondered about websites with weird shapes
For "weird" shapes you can always play around with the clip-path property. Mozilla's dev tools give you awesome ways to play around with it and create a customized shape
Related
I am using http://achecker.ca to validate my HTML/CSS and verify that I am WCAG 2.0 compliant. I'm quite happy with it for the most part but it is giving me an inappropriate error that is frustrating my efforts to get a clean validation. I was wondering if anyone had a suggestion for getting around that?
It's complaining about the contrast of some text I am displaying, saying that the background color and the text color are too similar. That's actually true - background-color is #f2eecf and text color is #f2f2f2 - but it isn't really relevant because I have a photograph appearing above the background color so there is actually good contrast between the photograph and the text color. Also, I've added a 1 pixel black text-shadow around the text to make it even clearer. Unfortunately, the tool doesn't seem to take the shadow or photograph into account. (It makes sense that it wouldn't know how to handle the photograph since it is not a uniform colour but I'm disappointed that the text shadow doesn't help.)
Is there something I can do to my HTML or CSS to help satisfy the tool? The website doesn't seem to have any way to contact the people operating the website or I would have asked there first.
Should I just ignore the "errors"? Or should I use a different tool? I'm just getting started with WCAG compliance checking - I realize now that I'm rather late getting into this - so maybe there are better tools to use. If so, I would appreciate any recommendation, especially for free tools.
I certainly want my pages to be WCAG compliant but I can't spare money for tools right now.
I have a photograph appearing above the background color
So your text has a transparent background color or it has a background-image? A code snippet would help.
I'm guessing you're getting this error: https://achecker.ca/checker/suggestion.php?id=301
If you look up "achecker.ca" on https://www.whois.net/, you get:
Administrative contact:
Name: Iris Neher
Email: ineher#ocad.ca
If you're using a decent accessibility checker, then you should not try to fake out the checker. I have not used achecker so I can't comment on how accurate it is. But if you post your code example, I might be able to tell if it's really a problem.
You can also try
http://www.brandwood.com/a11y/ - which specifically checks text on images.
https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en - chrome plugin
Short Answer:
Best practices is that if you are going to composite text over an image, the image is in a container with that container having a background similar to the image.
Longer Answer:
There are a variety of reasons that an image will not load. A site doing things such as placing live text over an image needs to ensure that text remains readable regardless of the load state of the image.
Also keep in mind that a user must be able to zoom up the text in size without breaking the site, meaning keeping the text over the image or BG so it is still readable, etc.
Outlines & Shadows
As for outlines and shadows: while they may assist contrast, they should be used to enhance and not for the sole basis of contrast. In part because the rendering of these properties is far from consistent among different browsers.
Resources
WAVE Automated Checker
APCA Contrast — the new contrast method for WCAG 3
I often find myself in the need for matching up my webdesign to some reference-image. I used to use the PixelPerfect plugin for FireBug, to overlay an image on top of my design - however these days I mostly develop in Chrome, and there isn't a comparable tool to PixelPerfect.
My perfect tool would be some kind of HUD display that would overlay the entire screen, so I could use it disregarding whatever browser I'm currently working in.
How do you match up your webdesign to make it pixel perfect? Any tools and tips is highly appreciated.
How do you match up your webdesign to make it pixel perfect?
Don't, seriously.
There are so many devices and browsers and other factors that mean that, today more than ever, designs cannot be pixel perfect. To even try and make them so is going to cost a lot of time.
People don't compare websites between browsers so save yourself some valuable time and sanity!
A great way that I've seen done involves work on both ends, but it works nicely.
First, make sure that your designs fit a grid: repeating, same-sized columns with fixed width gutters. You can take that grid layer and turn it into a background image that you apply to your containers during development. That way, if anything doesn't line up with the grid, you'll see it immediately.
try online service like makiapp.com it just like pixelperfect for firebug.
A while ago I found an article which discussed a solution to an alternative to the traditional way in which CSS sprites are used and designed.
A common issue is that you need to leave space around a part of the sprite if you don't want to accidentally have other parts of the sprite "bleed" into certain elements. Thus you can use diagonal layouts and things to alleviate this problem, but they all require a lot of open white space.
This article demonstrated an alternative which let you create zero white space sprites, and let you define the exact area and dimensions of the image you want to use without worrying about bleeding. I believe it used the CSS content property in the method, but I can't be sure.
I really want to find this article again but I can't seem to find it :(
I'm sorry for my vague description, but for anyone else who saw the article, they'll know what I'm talking about. Any help finding the link? Thanks!
I think what you're referring to might be creating font icons. It allows you to have retina-ready images, while at the same time restricting you to 1 color. There are currently two good solutions to do that:
http://fontawesome.io
http://icomoon.io
There's also the way of creating SVG modifiable shapes, which in turn allows you to use shapes of almost unlimited colors and complexity. This solutions however is not perfect, as it's based upon SVGs, which are not supported by older browsers
I'm looking for a good way to implement reusable buttons in CSS on my forms. The requirements:
- Separate image and text (text is in many languages)
- Rollover effects
- Plays nicely cross browser
- No javascript (if possible)
- Rounded corners
Whats the best way to do this? Years ago I was using the sliding doors technique, but this seems out of date now. Would you use CSS3 with a fallback for older browsers? Any particularly well thought of techniques out there?
Jquery UI buttons are AWESOME. They're fully tested, completely compliant, and really look great. With one line of code, you can have a fully styled button in no time flat. Here's the thing--they can be executed without Jquery (go figure)
First, the tut
So, the standard method is to build an element (a, button, input) with an id and set it as a button in Jquery like this:$('#element').button()
However, if you do it in the manner that the tutorial shows, you just have to add some classes to an element to get a similar effect. So, to make a button out of an a tag, it would just be
Button
In this example, there's no need to set the button with the jQuery button declaration...you're doing it by style only. With the flexibility to style so many different type of elements, it opens up a ton of doors.
You would have to have the Jquery UI css loaded, which offers the added benefit of ThemeRoller, which can style elements on the page with a simple change of a file. It's really a great way to "theme" a site that has to change branding in a hurry, which has made custom themed apps my company puts out extremely profitable.
I would use css sprites for this. You can find out about them here:
http://css-tricks.com/css-sprites/
It is basically a way to make one large image that has all states of buttons(normal, hover, selected). The benefit is it is one http request and you don't see a flicker the first time a hover occurs. If you use this route, the css background property will be the image. You can then use text-align and line-height to center the text that you want to place over the image.
This library, Nifty Corners Cubed uses Javascript but is a fairly clean way to round div tags links, etc. It is tough to find a reusable solution without using a sliding doors derived technique. Otherwise you stuck making none-resuable buttons that have to fit to your size.
You can also take a look at PIE http://css3pie.com/
A sprite is a great option and I do use them from time to time.
Personally I don't mind if my websites aren't identical in all browsers and I go the CSS class route. I keep in mind what is and isn't supported by various browsers and if there is an element that needs to be a certain way I will double check with W3Schools for compatibility.
The main benefit the keeps me using CSS/CSS3 classes is if something changes it is done quickly by text in a single file, if need be I can do a quick change from a 10 year old computer with a dial-up connection (if they still exist) and no imaging software.
Where the advantage of a sprite is they are supported across all browsers and they will look identical (more or less). SpriteMe is a bookmarklet that I have heard of to help with sprites if you decide to go down this path.
I see this as a what do you prefer matter... these questions are what I ask myself when making this type of decision:
How often will it change? Big or small changes? Will it be a complete redesign job if it changes? What do you already know? How much time are you willing to spend learning something that you may not know? What does your gut say for this project?
I hope this can help you.
Typography is one of the things that I can never get right when I design the web pages in css, the headings and body text never looks and feels as good as most other websites I see on the web. By this I main that my typography does not feel as readable and spacious as on these websites
I do try to copy the css of these nice looking websites, but I never seem to get the same result (or at lest I never seem to make those techniques my own, so that I can use them in the future). Plus, when it comes to typography, my css is all over the place; if I need to change the style later on, I spend a long time searching for the relevant value
When I first started learning css, I found a lot of tutorials on how to get the page layout correct (static, fluid, navigation left/right) but I never found any thing useful on how to get the right look and feel when it came to typography.
on the other hand there are a lot of book on typography but the don't seem to help on how to get typography looking good on the web.
I am hoping you can suggest some resources, or any fixed approaches that would always guaranty that type will look good on the web
Thanks
This article may be useful: http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
You're already doing the right thing by poking around the sites you admire and trying out their css; it's one of the best ways to learn.
In general, when I'm working with typography, the best things you can do to make it look good is to consider three things: contrast, color, and visual hierarchy.
Contrast: If your text is presented on a background with a color that does not contrast it well, it's going to look bad. So bad, in fact, that it may be deemed 'inaccessible'. You can use a tool such as Colour Contrast Check to make sure your text complies with Web Content Accessibility Guidelines.
Color: You'll probably find that most of the site you enjoy don't have truly black text. Pure black isn't commonly found in nature, and black text on a white background is the highest contrast you can get, which can look a little harsh. Most sites tone it down by making their black text slightly gray, with css such as color: rgb(30,30,30);
If you want to use colors, try to pick ones that work well together using basic color theory. Either that, or pick a nice dark color and stick with black.
Visual Hierarchy: Basically, use bigger fonts for more important headlines. So an h1 will most likely be your biggest piece of text, with each size going down all the way to h6, and anything else in p tags should be roughly the size of the text you see here. Webdesign Tuts just recently posted an article on visual hierarchy that was pretty good.
Hope that helps!