I'm a person that learns best from example. Currently, I'm diving into the field of Web Development after fifteen years of developing desktop apps. I'm still getting used to all the web technologies used for developing modern web sites and everywhere I look, I see cool little UI elements and question how they're implemented. So I thought I'd ask you, the web experts...the wexperts :)
What are some straight forward or creative ways you could code this grid-breaking arrow...
The basic layout for this page looks like...
What would the html/css code look like?
Would you split the image into multiple images or could you use a single image?
I'm sure this is a really simple concept and it completely boggles me. I'm sorry if this is a strange question, remember I'm a noob! :)
Thanks in advance for all your help!
Here's a link to the original tutorial where I found these images
If you look at your mockup the Header Panel includes the height from the top of the green box to the bottom of the box.
background: green url(images/header-bottom.jpg) no-repeat bottom left;
That jpg file includes that last 70 of so pixels in height including the whole arrow. Since your header and navigation are below where that arrow goes the containers will be exactly how you show it.
This also enables you to have Submenu and Content to just have background colors since the only gradient you seem to have in those two regions are in the same zone as the arrow in Header Panel.
You could make a rectangle image which is wide and short to handle it. Use the same colors as the rest of the page so that it blends in. Check it in all browsers to make sure the image renders the same as the html colors. With some image formats this is not the case at least in some browsers.
There are so many ways to do this... there are two or three ways that are better than most.
Here is an image of what Ballsacian and Sean are talking about. Ignore the black bits of the top of text on the bottom, imprecise screenshot taking on my part.
alt text http://img171.imageshack.us/img171/9392/picture6e.png
You can make the green part of the arrow transparent and save it as a gif or png, since the slope appears to be 45 degrees (no jaggies in GIF). You would still have to edit the image to match the subnav and content background colors if you ever change them, but the transparent triangle will automatically show the header background color through.
You would also have to remove the margins between the header, subnav, and content containers.
The Photoshop guy who made this clearly wanted the background to show through "naturally" by making the margins between the header and subnav/content, but that is impossible without un-semantic markup with the arrow. The way you could do this without even using CSS is to just put the image in right after the header, in between the header and subnav/content.
<header>
<img src="arrow.gif" />
<section class="subnav" />
<section class="content" />
Then make the line be transparent instead of the arrow. Now you would have to change the image if you ever changed the header, subnav, or content background-colors, but not the body background-color. This accomplishes what the Photoshop guy wanted in spirit, but is ultimately not as satisfying markup wise.
I can see that this concept is very awesome in photoshop, you only have to change the background colors of each of the sections and transparency takes care of the rest, cool! If you were confused as to how to do this and keep the Photoshop guy's concept true to itself, I don't blame you. It is impossible to do with basic HTML and CSS with images. Maybe with SVG you can do it.
For fun, here is the super-optimized sprite way of doing it. This requires you to put in a huge vertical transparent space between the arrow and the content top gradient. Then use this background on the UL of the subnav and the div/section of the content container. Set the background-position to 0 -(verticalspace + arrowheight) and repeat-x for the content. 3k single http request.
alt text http://img37.imageshack.us/img37/8503/arrowy.gif
Related
I have built a simple website which includes a parallax image gallery with accompanying text descriptions for each image. The gallery is underlaid with a simple repeating pattern wallpaper.
The images have no margin between them. Their borders are covered by the text box which has a higher z-index, and the discrepancy between the scroll speed of the images and texts creates the parallax effect.
I would like to allow the background wallpaper (bottom layer) to also be the background of the textbox but to achieve this, I would need to make the middle layer (the image) transparent where it is obscured by the text box.
I have no idea where to start with this - I suspect my best bet is to just ignore this problem remove the wallpaper altogether but perhaps there is a straightforward answer to this issue?
The included image has a semi-transparent text-box and borders to give an idea of the layout and the problem I'm facing. Would appreciate any ideas. thanks
Link to the image
It's kind of hard to explain, but I want to make a website with a picture as the background, and over the picture a grey overlay. I then want to have some text above the overlay, and where the text is, the grey overlay is removed, so the text is written in the absence of the grey overlay.
I made an example a year ago, with images, but I want to make it in CSS, if it's possible.
Here's the example (sorry for the mess, didn't really know what I was doing back then)
Example Page
Specifically, the text furthest down (most visible) on the page.
I really hope something like this is possible without using images as the text.
Thanks in advance!
This is not possible with CSS. You can do it with SVG though:
Text with image background in svg or css
I have the following
image as a powerpoint flow chart (text with hyperlinks not shown).
I want to turn this chart into an html-website.
Any ideas how to get a good result for this task?
I think recreating this with coding in html is troublesome.
Thank you.
Text on gray backgrounds (5 on right, 2 on left) are probably headings of the same level so they would be hN floating on the right and coming before each set of arrows.
Each individual set of arrows can be fairly easily coded as lists and styled as these breadcrumbs:
Simple scalable CSS based breadcrumbs (by Veerle Pieters)
Breadcrumb Navigation with CSS Triangles (by Chris Coyer)
They can expand with content if it seldomly occupies 2 lines (Firefox/Ubuntu and Safari/Mac have laaarge fonts, don't assume that your text will always stay on 1 line. Not speaking of zoom text that should be taken into account)
As for orange arrows between individual series ... that's complicated enough without HTML so it depends of context I believe. Is this an industrial process, webmarketing or else? To make it accessible, I'd use HTML images with alternative text trying to describe relationship.
Red arrows could be anchor links, probably.
I Think this image can be optimized pretty good, as it doesn't have a very complicated graphic. Therefore an easy solution can be just including it as an background image and then you can set the text and links into place using css.
A better solution is to break the picture into smaller components, then this way you can define "div" s with the background-color, border, and border-radios as the gray parts, and set the white elements as the background-image of "a" tag... However for the arrows I think you should include them as background-image...
Hope this helped...
I've noticed that recently sites began to keep images in one big image.
For example google.com
We see a lot of little images on left side. But really is one image:
How these images are cut and shown? (firebug says that it's just element with width and height, but where X and Y position is pointed and how?)
Thanks for reply
with css background the image is moved to the right position. the other part of the image is not shown, because the element with the image as background is exactly as big as the wanted picture part.
try changing the px values in the css in the background part. you should see the image moving
<span style="background-position:-20px -132px" class="micon"></span>
here you see the background-position which is used for this image
This technology is called CSS Sprite. To reduce the http connections number needed to load multiple images. Usually this is done by designer.
This is called "CSS Sprites".
There are a lot of informations on Internet about that. In random order :
Smashing Magazine
CSS Tricks
A List Apart
And many more ...
I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like:
The 4 images are:
The gray rounded corner rectangle
with the red shaded triangle and the
numbers
The blue bar
The lines on top of the bar
The yellow triangular indicator
All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle indicator to move, so the entire thing can't be one image.
Any ideas how to do this?
Note: any solutions have to work in IE6 and up, Firefox, and Chrome
Would this be what you want to do?: How to let an HTML image overlap another
If this was my challenge, I think I'd be looking at a full-fledged charting solution to make this a quick, painless process and give a better looking (and animated?) result.
Here's a near dead ringer that I found with some quick Google-Fu: http://www.fusioncharts.com/widgets/Gallery/Linear1.html
I've had to do a lot of charting of late for applications I build and I --used-- to hand-roll all my charts and tables. Not any more! Between HighChart, FusionCharts, and JqueryUI, it's all covered, no reason to invent the wheel....and they look better.