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;
}
Related
newbie here.
I'm trying to create drop down menus styled with triangles on top. I want each drop down menu to be a different color, but I cannot for the life of me figure out how to get each triangle to change... I've searched high and low and I'm not having much luck. If anyone could be of assistance, I'd really appreciate it! Here's what I use to make the triangles.
nav ul li ul:after {
position: absolute;
left: 50%;
margin-left: -10px;
top: -10px;
width: 0;
height: 0;
content:'';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff; }
Also, like I said, I am pretty new at this so if there's anything funky with my code that I can improve on please let me know... Thanks! :)
https://jsfiddle.net/LtuyhLrr/1/
You just need to add this the bottom of your CSS
.menupurple:after {
border-bottom-color: #dda1d8;
};
.menupink:after {
border-bottom-color: #ff5e7e;
}
Background
The line in your CSS that's currently controlling the triangles' color is the border-bottom: 10px solid #fff;
Currently you are overriding the background color the purple and pink menu, but you aren't overriding the color of the border that's creating the triangle.
.myclass {
border: 6px dotted #2d2d2d;
width:200px;
height:200px;
border-radius:100% 100% 100% 100%;
}
When i'am trying to give full border radius to border: 6px dotted #2d2d2d; in browser it showing solid border not dotted above is my css code please help me.
This only happens in Firefox I think it's a bug - it's because of the radius - you might consider using an image in this case.
CSS border radius for dotted border
Instead of writing:
border: 6px dotted #2d2d2d;
try:
border-style: doted;
border-width: 6px;
border-color: #2d2d2d;
Thats what I use when I write CSS.
I'm trying to create a custom styled text field for a client.
They want a trapezium shaped input field.
This is what I've done till now:
HTML
<input type="text">
CSS
input{
background: #ccc;
color: #000;
border-bottom: 50px solid #ccc;
padding-top:5px;
border-left: 20px solid #fff;
border-right: 20px solid #fff;
height: 0px;
width: 200px;
}
Fiddle
Any idea on how or if it's possible to make something like this: .
Something like this:
<span class="outer">
<span class="inner">
<input type="text" value="test value" />
</span>
</span>
.outer {
display: inline-block;
border-bottom: 34px solid #000;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
.inner {
display: inline-block;
margin: 1px -18px -40px -18px;
border-bottom: 32px solid white;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
input
{
background: transparent;
border: none;
display: inline-block;
font-size: 130%;
}
http://jsfiddle.net/fNCt4/4/
The input itself doesn't contribute to the shape. It's only those two spans. You could use the input element itself for the inner shape, but since you need to add markup anyway, I think you might as well add two 'generic' trapezoid helper shapes and leave the input element untouched.
You'll need two to fake the border. This is needed, because the shape itself is created by adding a border, so the visible border is constructed by overlaying a slightly smaller shape onto the other.
The rest is tricks with negative margins to allow the inner shape to be positioned over the border of the outer shape. And of course using transparent as a color, to prevent the 'negative space' of the inner shape to overwrite the outer shape.
Once again clients being complicated!
I suggest you use a background image In the CSS of a trapezium with the outside transparent so a png. Make the margins in a bit so the user doesn't write outside the trapezium.
Hope this helps
You have two options here
CSS3
Image as a background.
for css3 option check out this link http://css-tricks.com/examples/ShapesOfCSS/
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px;
}
But to make it backward compatible i would suggest you go for image as a background as a fallback for css3.
Can anyone help me to implement transparent square fluid with bootstrap?(https://twitter.com/ladygaga)
also I'd like to know how to implement rounded square in that transparent square.
Thanks in advance!!
It seems they're just using a semitransparent background image on that div to get the glassy texture. The image or background-color(such as RGBA(0,0,0,0.2)) would need to have it's alpha channel set to something other than 100%. Their CSS looks like this.
.wrapper, .wrapper-narrow, .wrapper-permalink {
position: relative;
width: 837px;
min-height: 100%;
padding: 54px 14px 15px;
margin: 0 auto;
background: url(../img/wash-white-30.png);
}
Assuming you were going to use a similar approach. With a 'wrapper' class providing the transparent background, and a 'whitebg' class providing the solid white background:
<div class="container-fluid wrapper">
<div class="row">
<div class="span2 well whitebg">
content..
</div>
</div>
</div>
with this CSS to give you what you need for your class:
.whitebg {
background-color:white;
}
The transparent DIV (not square :)) is implemented with a PNG image that has an alpha channel, as follows:
.wrapper, .wrapper-narrow, .wrapper-permalink {
background: url("../img/wash-white-30.png") repeat scroll 0 0 transparent;
margin: 0 auto;
min-height: 100%;
padding: 54px 14px 15px;
position: relative;
width: 837px;
}
As far as rounded corners are concerned, on that page, they are implemented as follows:
.module, .promptbird {
background-clip: padding-box;
border-radius: 6px 6px 6px 6px;
line-height: 16px;
margin-bottom: 10px;
position: relative;
}
For your requirements in bootstap, merely using the css opacity property for your div, and the border radius property for your inner divs will do the trick.
.transparentDiv { /*make any SQUARE transparent!*/
background: #fff; /*white*/
opacity: 0.5 /*will not work in older IE versions, add filter for it!*/
margin: 0 auto; /* optionally, center it! */
}
.roundedDiv {
border-radius: 3px 3px 3px 3px; /* 3px looks way cool! */
}
usage:
<div class="transparentDiv">I see through you baby!</div>
<div class="roundedDiv ">Love makes the world go round!</div>
Use a transparent color for your background-color using an rgba color value. That's how you get the transparency.
For the rounded corners, make it easy by using border-radius.
Here's a fiddle containing all the stuff you want - http://tinkerbin.com/j5A3fKHl
What is happening
I am running into a problem. I have a menu like this:
<div id='feeds'>
<div class='feed'>Super Dense</div>
<div class='feed'>Everything</div>
<div class='feed current-feed'>Smashing Magazine Feed</div>
<div class='feed'>Hot Questions - Stack Exchange</div>
</div>
I style this with CSS (I only show the border and background properties here):
.feed {
background: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#CCC));
border-bottom: solid 1px #AAA;
border-left: solid 1px #AAA;
border-right: solid 1px #AAA;
}
.feed:first-child {
border-top: solid 1px #AAA;
}
.feed.current-feed, .feed:active {
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#444));
border-bottom: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
.feed.current-feed:first-child, .feed:active:first-child {
border-top: solid 1px #000;
}
This is the result (view on jsFiddle WebKit only):
Yes, Jeff, all the extra Stack Exchange feed traffic comes from me constantly reloading my feed reader. Sorry :)
The Problem
This might look nice, but there is a little problem. There is a #AAA line above a black box, and this does not look nice (pixel perfection):
My Question
Is there a way in CSS to check if the next element is of a certain class, so I can set border-bottom to solid 1px #000, or is there another way to solve my problem?
My web app heavily uses JavaScript, so if this is required, it's not a problem, but CSS is cleaner in my opinion.
One way I can think of:
Position every .feed relatively:
.feed {
position: relative;
/* ... */
}
Then find the next immediate sibling using the + combinator, make it sit above its previous sibling using a greater z-index and a negative margin, and give it the desired border (notice that this is a top border):
.feed + .feed.current-feed, .feed + .feed:active {
margin-top: -1px;
border-top: 1px solid #000;
z-index: 1;
}
The top black border will sit above the previous sibling's bottom border and thus be visible over it. The W3C box model means that the content height of each .feed isn't affected, so an equally thick negative margin is all you need to counter the thickness of the added top border.
Take a look at the preview and see if that's what you're looking for. Also, a screenshot:
You can use the jQuery .parent() function to do this:
http://api.jquery.com/parent/
JSFiddle