Here is what is happening:
CSS:
.speech-box {
height:76px;
width:220px;
padding:6px 10px;
background-image: linear-gradient(#4f4f4f,#000);
}
.speech-box:before {
content:'';
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right:5px solid #4f4f4f;
position:relative;
left:-15px;
top:-3px;
}
And my HTML:
<div class="speech-box">
<span class="speech"></span>
</div>
And here is a fiddle: http://jsfiddle.net/xqy4dLbc/
I'm guessing the problem is with my HTML?
You need to add
display:block;
or
display:inline-block;
to .speech-box:before :
DEMO
The default display property of pseudo-element is inline (see MDN) and you can't set height on inline elements. Therefore the height:0; you set doesn't apply.
Related
I am trying to get something like this:
I've tried using outline but I can't set the border radius on an outline. I've also tried a box shadow with a white border but I need the border to be transparent. Any ideas would be greatly appreciated.
can't set border radius of the outline with this:
.btn {
outline: 1px solid #B54104;
outline-offset: 1px;
}
gap between outline and button is not transparent:
.btn {
border: 1px solid #fff;
box-shadow: 0 0 0 1px #c5170a;
}
The gap between the button and the offset outline must be transparent.
You can try a background coloration relying on background-clip to avoid coloring a part of the button:
.button {
display:inline-block;
padding:3px; /*control the spacing*/
width:100px;
text-align:center;
line-height:30px;
border-radius:15px;
color:#fff;
border:2px solid orange;
background: orange content-box; /*color only the content*/
}
body {
background:pink;
}
<div class="button">
button
</div>
Same idea using padding-box and controling the space with border:
.button {
display:inline-block;
width:100px;
text-align:center;
line-height:30px;
border-radius:15px;
color:#fff;
border:5px solid transparent; /*control the spacing*/
background: orange padding-box; /*don't color the border*/
box-shadow: 0 0 0 2px orange;
}
body {
background:pink;
}
<div class="button">
button
</div>
border-radius now works fine with outline.
.btn {
display: inline-block;
margin: 20px;
padding: 15px 30px;
background-color: #b54204;
border-radius: 5px;
color: #fff;
outline: 2px solid #b54204;
outline-offset: 4px;
}
<div class="btn">
BUTTON
</div>
I'm looking for gradient or shadow effect (I don't know which exactly) like:
thank you for help.
Here is an idea using gradient and border to approximate it, simply adjust the color as you need:
.button {
display:inline-block;
padding:10px 20px;
background:linear-gradient(#ffa797,#e95648);
box-shadow:0px 1px 2px 2px #ccc;
position:relative;
color:#fff;
z-index:0;
}
.button:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
border-right:15px solid rgba(255,255,255,0.4);
border-left:15px solid rgba(0,0,0,0.5);
border-top:19px solid rgba(255,255,255,0.2);
border-bottom:19px solid rgba(0,0,0,0.2);
}
<div class="button">some text</div>
I'm trying to play around with div to get the item layout that I need, but I can't achieve what I'm looking for
.skills-container
{
height:50px; /* something like 50px */
padding:5px;
}
.skill-pic
{
width:48px;
height:48px;
}
.skill-content
{
}
.skill-content p
{
}
.progress
{
}
HTML :
<div class="skills-container">
<div class="skill-pic">
<img src="img/ps.png" alt="Klematis" width="48" height="48">
</div>
<div class="skill-content">
<p>Photoshop</p>
<div class="progress">
<div class="progress-bar progress-success">
</div>
</div>
</div>
</div>
You need to add float: left; to the .skill-pic css.
EDIT: Someone also pointed out this doesn't get exactly what you need. You'll also need to add a border attribute to the css of the elements like so:
border: solid black 1px; and replace the 1px with the size of the border you need... You'll have to play with it.
Try this as your CSS: it should work and you can tweak it as such... Working JSfiddle here:
.skills-container
{
display:inline-block;
border: solid black 4px;
}
.skill-pic
{
margin:2px;
float:left;
width:45px;
height:45px;
}
img
{
border: solid black 3px;
height:45px;
}
.skill-content
{
height:45px;
width:200px;
border: solid black 3px;
float:left;
margin:2px 2px 2px 5px;
}
.skill-content > div
{
margin:2px;
border: solid black 1px;
}
.progress
{
margin:2px;
border: solid black 1px;
}
Is it possible to do a CSS border within a border?
Here is what I'm trying to do: screenshot
I would like to avoid extra html elements and also avoid using images because of retina devices. If only I could put a CSS outline on only one side of the element I would be golden, but this doesn't seem to be possible.
Edit:
Here's what I've ended up with from the many excellent solutions that were posted - thank you!
http://jsfiddle.net/kisabelle/9umMr/1/
HTML
<footer>
<p>Example</p>
</footer>
CSS
footer{
border-top: 15px solid #393734;
position: relative;
}
footer:after{
content:"";
border-top: 2px #989593 dotted;
position:absolute;
top: -8px;
left:0;
width:100%;
height:0;
}
Using the pseudo-element :after to add a second border (instead of box-shadow) allows support in IE8 and up.
See the jsfiddle for a second example in which you can control the space between the dots in the dotted border using the CSS content attribute instead of a border.
A couple of options:
Use border + outline
Use pseudo elements
Use multiple box-shadows
Use border-image
Googling any of those brings up loads of resources
Now that I've seen the screen grab, I reckon a combination of border top plus some box-shadows is your answer: http://jsfiddle.net/ne9nm/
Edit: Update the JSFiddle to show two possible solutions; one using box-shadows, and one using a pseudo element.
The HTML:
<div id="example-1">Example 1</div>
<div id="example-2">Example 2</div>
The CSS:
div {
background:rgb(100, 150, 100);
width:100px;
height:100px;
padding:30px;
margin:20px;
}
#example-1 {
border-top:1px white dotted;
box-shadow: inset 0 5px 0 grey, 0 -5px 0 grey
}
#example-2 {
border-top:10px solid grey;
position:relative;
}
#example-2:before {
content:"";
position:absolute;
width:100%;
height:0;
border-top:1px white dotted;
top:-5px;
left:0;
}
you can use box-shadow from css with inset and :after or before like this
Demo :http://jsfiddle.net/uXpaX/1/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: rgb(140, 179, 140);
padding:20px;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black;
}
figure:after{
position:absolute;
top:-2px;
left:0;
height:1px;
width:100%;
content:'';
border-top:4px dashed white;
}
Or you can just use box-shadow and border
Demo:http://jsfiddle.net/uXpaX/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: rgb(140, 179, 140);
padding:20px;
border-top: 2px dashed white;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black;
}
html
<figure>
<figcaption>Coustomer Care</figcaption>
<menu type=list>
<li>Billing</li>
<li>Shipping & Tracking</li>
<li>Returns & Exchanges</li>
<li>Products & Sizing</li>
<li>Contact</li>
</menu>
</figure>
or use an other box-shadow trick like this
Demo:http://jsfiddle.net/uXpaX/2/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: black;
padding:20px;
border-top: 2px dashed white;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black,inset 0 100em rgb(140, 179, 140);
}
I'm creating a box containing some image links, and currently I've got something that looks great on Chrome and Safari, but wraps at Firefox's default zoom level. Zooming in makes the box look fine, but at the normal zoom level they're wrapped. Here's what it looks like normally, on Chrome:
...and this is how it looks on Firefox:
The strange thing about this is that the right box isn't completely wrapped: some of the top and bottom borders are visible on the first line and I can't make sense of why it is wrapped at this particular point. This is what the HTML looks like:
<div class="clearfix buyTrackContainer">
<div class="buyTrackBox">
<p>Buy this Track</p>
<div class="buyLinksBox">
<div class="buyLinksBoxLeft">
<div class="d-itunes"></div>
</div>
<div class="buyLinksBoxRight">
<div class="d-amazon"></div>
</div>
</div>
</div>
<div class="buyTrackBox">
<p>Buy on Vinyl/CD</p>
<div class="buyLinksBox">
<div class="buyLinksBoxLeft">
<div class="b-ebay"></div>
</div>
<div class="buyLinksBoxRight">
<div class="b-amazon"></div>
</div>
</div>
</div>
...and the relevant CSS is as follows:
.buyTrackContainer {
text-align: center;
}
.buyTrackBox {
display:inline-block;
border:1px solid #ddd;
padding-left: 3px;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 5px;
width:46%;
text-align:left;
background-color: #fff;
border-radius: 3px;
border-bottom:3px solid #ddd;
}
.buyLinksBoxLeft {
display:inline;
border: 1px solid #ddd;
border-bottom: 3px solid #ddd;
border-radius: 3px 0px 0px 3px;
padding: 12px 4px 8px 8px;
text-align:center;
vertical-align:center;
background-color:#fff;
}
.buyLinksBoxRight {
display:inline;
border: 1px solid #ddd;
border-bottom: 3px solid #ddd;
border-radius: 0px 3px 3px 0px;
border-left:0px;
padding: 12px 8px 8px 4px;
text-align:center;
vertical-align:center;
background-color:#fff;
}
.buyLinksBox {
display:block;
text-align:center;
padding-bottom:10px;
padding-top:8px;
}
div.d-itunes {
display:inline-block;
margin-left:0px;
width:50px;
height:17px;
background:url(/images/misc/iTunes-buy-button.png) no-repeat;
}
div.d-amazon {
display:inline-block;
margin-left:0px;
width:50px;
height:17px;
background:url(/images/misc/Amazon-buy-button.png) no-repeat;
}
div.b-ebay {
display:inline-block;
margin-left:0px;
width:50px;
height:17px;
background:url(/images/misc/eBay-buy-button.png) no-repeat;
}
I'm relatively new to proper CSS design so I'd appreciate any pointers about how I could improve my coding style. Does anyone know what might be happening here that could cause this?
Ill try with the first container change the add the following to
.buyTrackBox {
white-space:nowrap
}
.buyLinksBoxLeft {
float:left;
}
.buyLinksBoxRight {
float:right;
}
More over try dividing the width of buyLinksBoxLeft and buyLinksBoxRight in percentages so as to fit th parent container some thing around 40% may do. do the same with the buyLinksBox div and children
on your class, 'buyLinksBoxLeft' & 'buyLinksBoxRight' change
display: inline;
to
display: inline-block;
fiddle: http://jsfiddle.net/aqAVy/
That should sort it out.
Avoid redundancy in names... eg. change .BuyLinksBoxRight (son of .BuyLinksBox) to just .right (same with .left)
When multiple items has a lot of common properties, group them in a common selector.
Use oneliner paddings and borders when you can.
Code will be more readable and problems will vanish.
Running Demo
.buyTrackContainer {
text-align : center;
}
.buyTrackContainer > div,
.buyLinksBox > div {
display : inline-block;
border : 1px solid #ddd;
}
.buyTrackBox {
background-color : #fff;
border-bottom : 3px solid #ddd;
border-radius : 3px;
text-align : left;
padding : 1px 3px 5px 3px;
width : 134px;
}
.buyLinksBox {
padding-bottom : 10px;
padding-top : 8px;
text-align : center;
}
.buyLinksBox > div {
background-color : #fff;
vertical-align : center;
border-bottom : 3px solid #ddd;
text-align : center;
}
.buyLinksBox > .left {
border-radius : 3px 0px 0px 3px;
padding : 12px 4px 8px 8px;
}
.buyLinksBox > .right {
border-radius : 0px 3px 3px 0px;
border-left : 0px;
padding : 12px 8px 8px 4px;
}
.buyLinksBox > div > a > div {
margin-left : 0px;
height : 17px;
width : 50px;
}
div.d-amazon, div.b-amazon {
background : url(/images/misc/Amazon-buy-button.png) no-repeat;
}
div.d-itunes {
background : url(/images/misc/iTunes-buy-button.png) no-repeat;
}
div.b-ebay {
background : url(/images/misc/eBay-buy-button.png) no-repeat;
}