I'm trying to make an HTML/CSS menu in which the active link is indicated by a section of transparency (a pointer notched out of the border), to reveal the image behind the menu.
This is what I'm going for: http://larsakerson.com/northendgreenway/beta3.html
But with this sort of notched pointer: http://larsakerson.com/northendgreenway/beta2.html
Is there any way to do this in CSS (either 2.1 or 3), or is a strictly image-based menu the only way to make this work?
You can make a notched corner using borders like so...
div {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent blue blue blue;
background: transparent;
}
jsFiddle.
Refer to the jsFiddle and notice the top corner is letting the background through. Simply adapt this example to your site.
here you go dude. http://jsfiddle.net/jalbertbowdenii/vnNXW/
just change .trapezoid to .active:active{}
.trapezoid {
display:block;
margin:0;
padding:0;
width:1px;
height:1px;
background:transparent;
border-style: solid;
border-color:transparent #eee #eee #eee;
border-width: 50px 50px 50px 50px;
}
and change the border-sizes to fit.
for .active{border-color:transparent}
Related
I'm new with css, but the thing that i'm trying to do is slightly complicated, at least for me. I have a picture that i want to cover with a circle, transparent from the inside, black from the outside.
this is what I've accomplished so far:
.roundedBorder {
border: 1px solid #1EC865;
border-width: 4px;
border-radius: 81px;
}
.img { position:absolute; top:6px; left:6px; width:81px;
}
<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg">
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder">
</div>
https://jsfiddle.net/dmL56kek/
now i'm looking to cover the outer of circle with a solid color.
PS: i don't want to apply any style on the image because it won't work in my case.
A little change is css would help and i have used width:78px with a calculation that width of outer div is 70px and border is 4px from left and right.
.roundedBorder {
border: 1px solid #1EC865;
border-width: 4px;
border-radius: 81px;
}
.img { position:absolute; top:8px; left:8px; width:78px; border-radius:100%;}
<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg">
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder">
</div>
I'm trying to create just a solid white 10px border at the top of this main content (.tab-pane) element but no matter what I try, I keep getting this boxed outline and a white border at top with grey in the middle and white on the sides. Maybe I'm trying to do it on the wrong element (but i want it right below the nav in between the nav and the main content).
here's some of my css:
.tab-pane {
border-top: 10px;
border-color: #ffffff;
border-style: solid;
border-width: 100%;
}
Try this short version
border-top: 10px solid #FFF;
Otherwise, the full code should be:
border-top-color: #FFF;
border-top-style: solid;
border-top-width: 10px;
Looking at your markup the area that you want to target is the id = home so if you add a background color of white to that id in your css that gray bar will go away. so at the bottom of your stylesheet/css just add the following code.
CSS
#home {
background-color: white;
}
I want to know the difference between border styles- ridge and groove. When i used them, i was not able to spot the difference between the two. I cannot upload the image since i have not reached level 10 to make it more clear. Here's the code:
border-style: groove ridge dashed groove;
It's border shadow position:
Ridge: from top left
Groove: from bottom right
div {
padding: 10px;
margin: 10px;
float: left;
background-color: white;
}
.wrap {
background-color: #ffdddd;
}
#ridge {
border-width: 5px;
border-style: ridge;
margin-right: 1px;
}
#groove {
border-width: 5px;
border-style: groove;
margin-left: 1px;
}
<div class="wrap">
<div id="ridge">ridge</div>
<div id="groove">groove</div>
</div>
The difference is defined in somewhat vague terms in the CSS 2.1 specification:
groove
The border looks as though it were carved into the canvas.
ridge
The opposite of 'groove': the border looks as though it were coming out of the canvas.
This allows various interpretations and implementations, and the visual effect is often not that clear. It tends to be clearer when the border is relatively wide. Typically browsers use two different colors to create the impression, the declared border color and a lighter color. This is meant to correspond to an idea of groove or ridge border when light is coming from the direction of the upper left corner. Example:
<style>
span { border: solid red 10px }
.groove { border-style: groove }
.ridge { border-style: ridge }
</style>
<span class=groove>groove</span>
<span class=ridge>ridge</span>
Here are some MDN docs on css border-style
According to this:
groove: Displays a border leading to a carved effect. It is the opposite of ridge.
Groove is a 3D effect that gives the impression that the border is carved into the canvas.
Ridge is a 3D effect that has the opposite effect of groove, in that the border appears to protrude from the canvas.
This link gives you a clear idea:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style
I need to create this ribbon and stars look (image attached) without an image file. I know how to put the stars in it, but am needing the ribbon sides like the image is attached. How can I do this without an image file, and just pure CSS and HTML? Am thinking that the border-radius will need to be manipulated here.
This is what I have so far, which is terrible.
How can I use border-radius to get this effect?
I would recommend combining CSS triangles with pseudo elements :before and :after for the side triangles of the ribbon, and html character ★ for the stars:
working jsFiddle
HTML:
<h1>★ KRISTINE COADY ★</h1> <!-- ★ is html star character -->
CSS:
h1{ /* all regular attributes here */
background:#A52927;
display:inline-block;
padding:0px 30px;
color:#EEE4D3;
position:relative;
height:40px;
line-height:40px;
}
h1:before{ /* this will create white triangle on the left side */
position:absolute;
content:"";
top:0px;
left:0px;
height:0px;
width:0px;
border-top: 20px solid transparent;
border-left: 20px solid white;
border-bottom: 20px solid transparent;
}
h1:after{ /* this will create white triangle on the right side */
position:absolute;
content:"";
top:0px;
left:auto;
right:0px;
height:0px;
width:0px;
border-top: 20px solid transparent;
border-right: 20px solid white;
border-bottom: 20px solid transparent;
}
This way you will not have to use wrappers or border-radius.. You should ofcourse alter the font, font size, height, (etc.) to your needs..
So I saw this http://cre8tivenerd.com/demos/css/Line-separator.html and wanted to create a divider with that "pressed" effect. The problem is, I don't have a clue of what the divider colors should be for me, tested it out and it didn't get the same effect. My background color is #222222. Anyone that can help me and maybe explain how I "calculate" which colors I should use for the divider?
You can easily get this effect like this:
<div class="vDivider"></div>
css:
.vDivider {
width: 80%;
height: 1px;
margin: 10px auto;
background: #434343;
border-bottom: 1px solid black;
}
The contrast between the background color and the bottom border creates this effect.
Here is a DEMO
It won't look good as #222 is already too dark. Only option as #Dim13i suggested is using black as bottom color, but it won't look distinct.
How about make it a little thicker?
.line-separator {
background: none repeat scroll 0 0 #777;
border-bottom: 2px solid #000;
height: 2px;
}