This web page uses a vertical menu that shows a neat little arrow pointing from the currently selected menu item to the page. I examined the code in Chrome and found the following.
For the anchor that displays the arrow the markup is
<li class="current">
<a...>
::before
"Welcome"
</a>
The corresponding CSS is
aside li.current a:before
{
content:"";
border-color:transparent transparent transparent #fff;
border-style:solid;
border-width:10px;
width:0;height:0;position:absolute;left:-30px;
}
I have a fair idea of what is going on here but I haven't quite been able to figure out just how it is that the end result is a triangle pointing to the left. Perhaps someone who understands CSS better than I might be able to explain?
you had used border color of top right and bottom transparent and so it will take color of your left main div. Also as you had used a:before so before start of every a tag it will create this kind of structure in which no content is there and with position absolute you can set it as a triangle view...
If you remove transparent from your code and give colors to border you can see that originally its just like simple square box. So, its a CSS tips and tricks to make shapes using CSS.
Related
In a mobile web application I have recently created there are many anchor tags used throughout. The anchor tags by default have a clickable area that is purely surrounding the text. I am looking to try and expand this area without affecting the position of the anchor tag at all.
The black border shows the current clickable area and the red border shows the clickable area I would much prefer. The first thing you think of is to add padding, but this moves the tag which is the whole reason what I'm asking is a problem. How can I expand the clickable area of all the anchor tags in the application without affecting their positions?
You can use an absolute positionned pseudo element to increase space where a link stands.
basic DEMO:
a {
display:inline-block;
position:relative;
border:solid;
}
a:before {
content:'';
position:absolute;
top:-1em;
left:-1em;
right:-1em;
bottom:-1em;
border:solid red;
}
This a technique that can be usefull for menus that close too easily because submenu is too much on the edge.
im trying to make a gallery out of boxes of solid color and an icon on top of it, and when you hover over the box, the solid color changes to a image, and the icon remains.
I actually got a decent answer to this on a previous question, but didn't work with keeping the site responsive. So i thought i figured out a way of going around this, but i cant seem to find a way to make the icon stay on the top.
HTML:
<div class="icon">
<img src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" onmouseover="this.src='http://lolhit.com/img/ups/98581662041324299463.jpeg'" onmouseout="this.src='http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif'" />
</div>
CSS:
.icon {
background: url(http://loosewire.org/wp-content/uploads/blue-icon-transparent-background-500px.png) no-repeat center;
display: inline-block;
}
I also made a fiddle, and just to be clear, it's the .icon that i want to be on top at all times, with box having the ability to change to image on hover: http://jsfiddle.net/baardkolstad/2L44J/
The images used are only for presentation purposes, not the actual images that are going to be used.
I think you should take a look at using a z-index here:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Take note that this only works on positioned elements (position:absolute, position:relative, or position:fixed). This is also on the above web page.
Okay, my final solution for this was to put the icon in an img tag and use the two photos as backgrounds in the CSS. In that way, you have the icon centered at all times, while staying on top.
Thanks for all the help on this matter!
I'm looking for a bit of brainstorming assistance.
I am coding a layout that was put together by a designer and am trying to think of a way to handle a horizontal navigation that has angled edges, and goes from a blue background, to a white background when a link is selected.
I'll actually just include a screenshot. This is actually the navigation for a Tabbed content area. The top half of the screenshot shows what it will look like when the first tab is selected. The bottom half of the screenshot shows the 2nd tab selected.
http://i.stack.imgur.com/P34yI.gif
So my problem comes from the fact that HTML elements are rectangles, not rectangles with angled edges. I saved the angled edge with the shadow as a CSS background, and that worked fine, until I realized that each link can turn white and the BG image has a bit of the next link embedded in it to give the illusion of the angle, and thus the left most link would need a different background then the middle link, and the right most link, etc...
I could assign a unique class / id (or use nth child) to each link, but I would like to keep the solution flexible so I can add another link/tab in the future.
I was curious if anyone had any ideas on how to create this appearance by possibly using CSS3 / HTML5 / or some transparent PNG and negative margins or relative positioning?
I'm not asking for code or for you to do my work for me :) I'm just looking for ideas - just a bit of community brainstorming. If anyone has any suggestions please let me know, it might lead me to a solution.
Thanks!!
Assuming you're using a 'ul > li > a' structure for the menu, I would use two angled backgrounds (right and left... the right one is about 27px with the shadow, the left about 22px). Apply the left corner to the <li>, and the right corner to the <a>. That will give you doubled backgrounds on each list item, so you should use negative margins on each side of the <li> to pull its siblings to overlap. Then use z-index to make sure on hover or highlight that the menu item shows up on top of the others. I've added an additional 30px of padding on both sides to create the extra space around the text:
li {
margin-right: -27px;
margin-left: -22px;
padding-left: 52px;
position: relative;
background: url(leftcorner.jpg) left top no-repeat;
background-color: #3aa1cc
}
li a {
padding-right: 57px;
background: url(rightcorner.jpg) right top
}
li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}
I haven't tested this but I think it should work... possibly with some additional tweaking.
This solution doesn't include the subtle inner shadow... to do that you would have to use a 1px repeating gradient background on the <li> then use :before and :after pseudo elements for the two corner background images.
Additionally in my code I put two seperate .jpgs (normal and hover) but really you should use a sprite and background-position so there is no flash while the hover state image is loading.
<ul>
<li>Brantford Grandview</li>
<li>Brantford Vintage</li>
<li>Kingston <br/>River Park</li>
<li>Paris</li>
</ul>
It's a pretty basically drop down menu Im building. Right now, I'm just adding a top border to every li giving it a grey line. However, what I want is a 1or 2px gap between the links so the user can see the bg behind. I tried add a div tab in between the li with a height of 1px, but it does not work.
Thanks
A padding inside the li would work.
li{
padding-top:2px;
}
would leave a 2px space inside the li and show the background.
It's hard to tell without seeing the CSS, but I would try fooling around with margin-top or something. It mainly depends on what element the background is being applied to, in your case you would need to apply it to the <li>. Let me know if I need to elaborate.
Can someone help me understand a way of adding rounded corners top left and top right of the current page link below? I have used jQuery corners but this doesnt work in IE very well... I was looking to use PNG. The space between the corners should be white. The PNG would be transparent letting whatever image was below to show through.
<ul>
<li class="current"><span>Home</span></li>
<li><span>Create Account</span></li>
<li><span>Order a Catalogue</span></li>
<li><span>Distributors</span></li>
<li><span>About Us</span></li>
<li><span>Contact Us</span></li>
<li><span>Login</span></li>
</ul>
Any help would be greatly appreciated.
Draw your rounded rectangle in something like Paint.NET (make sure you have a transparent background!) and make it the exact width of the LI. Give it more than enough height so that you can cut off the button rounded corners and it will still be tall enough to fill the LI. Cut off the bottom rounded corners, crop accordingly, and save it as a PNG. Set it as a background image on the element with CSS...
ul li.current {
background:url(../images/nav-current.png) no-repeat;
}
Note: if you use a background color on the LI, it will bleed through the transparent part of the rounded corners, which is not good.
Moving forward... you can just use the CSS3 border-top-left-radius and border-top-right-radius along with background-color (no images!), but these are not supported in IE8 and older.
Hey friend to apply border radius that works in IE also you have to apply border-radius.htc file and you can apply it to your CSS like this one. In my project i am using it on Div tag but you can use it whereever you want.
div
{
-moz-border-radius: 10px;
background: #D4D0C8;
border: 1px solid #808080;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}
you will find border-radius.htc file on google also. If you can provide your emailid then i can mail it to you if you want