I've been trying to make a gradient top border for a box with a radius. The gradient border should only be at the top of the box, and it needs to have the same radius (5px) as the rest of the box. The end result should look like this:
My current code:
.card {
text-align: center;
margin: 0 1%;
background-color: #252a41;
border-radius: 5px;
border: none;
width: 25%;
padding: 3% 0;
}
.instagram {
border-top: 3px solid rgb(243, 242, 241);
border-radius: 5px;
border-image: linear-gradient(to right, #fdc468, #ffa263, #ff806c, #f9607f, #df4996) 1 / 3px 0px 0px 0px / 0px 0px 0px 0px round;
position: relative;
}
<div class="card instagram">
<div class="row">
<img src="images/icon-instagram.svg" alt="instagram icon" />
<span class="small-text username">#realnathanf</span>
</div>
<h1 class="followers-count">11k</h1>
<p class="small-text followers">FOLLOWERS</p>
<div class="row">
<img src="images/icon-up.svg" alt="icon up" />
<span class="change change-up">1099 Today</span>
</div>
</div>
Apparently the border-image property isn't compatible with border radius, so I have to make a before/after pseudo-element. However I couldn't figure out how to make one for the desired result.
You can do it with only background:
.box {
width:200px;
height:200px;
border-radius:5px;
background:
linear-gradient(to right, #fdc468, #ffa263, #ff806c, #f9607f, #df4996) top/100% 5px no-repeat,
#000;
}
<div class="box">
</div>
Related
I am trying to show a gradient vertical separation between two columns, and a bottom horizontal gradient separation between the divs.
The following code (scss) doesn't show the bottom border:
.col-container {
.column-box {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to right, white, #efedf4, white) 1 stretch;
min-height: 200px;
}
& > div:nth-child(odd) {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to bottom, white, #efedf4) 0 90%;
}}
While the following code only shows the bottom border:
.col-container {
.column-box {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to right, white, #efedf4, white) 1 stretch;
min-height: 200px;
}}
Here is the code, as you will see the left div losses its bottom border:
https://jsfiddle.net/0nsvzqxg/
Any idea how to show only the vertical separator in between the 2 divs and the bottom border on all of them?
Thanks
You have 2 things to solve.
draw the border on two sides but from the same gradient
select the right boxes via the nth-child() selector
Since the width of the border image is quiet small, the gradient can be drawn like a diagonal. from a top corner to the opposite bottom corner and repeated once . It could be linear-gradient(to bottom left, white, #efedf4, white, #efedf4, white).
while you need to draw one or 2 borders, you need to update the slice values for each borders. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
When four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise)
div {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to bottom left, red, blue, red, blue, red)1 / 2px 2px 2px 2px stretch;
/* what would be gradient image */
background: linear-gradient(to bottom/* or top */ left/* or right*/ , blue, red, blue, red, blue);
box-shadow: inset 0 0 0 2px white;/* break border from background */
/* demo purpose */
height: 50vh;
width: 50vw;
padding: 1em;
color: white;
}
html,
div {
display: flex;
align-items: center;
justify-content: center;
}
p {
margin: 1em;
padding: 1em;
}
html {
min-height: 100vh;
}
/* end demo */
<div>
<p>To figure out the gradient image needed for the border, you may draw it in the background to tune it</p>
<p> from horizontal / vertical to diagonal, it needs to be repeated at least once.</p>
</div>
Note: shorthand values : border-image:/* source | slice | width | outset | repeat */
About the nth-child() selector, you can use a counter CSS to see better where each child stands .
.col-container {
counter-reset: box
}
.column-box:nth-child(odd) {
color: tomato
}
.column-box::before {
counter-increment: box;
content: 'child N°:'counter(box)' ';
color: green
}
<div class="col-container">
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
Once put together, it can be :
.col-container {
overflow: auto;
}
.col-container > * {
float: left;
width: 50%;
box-sizing: border-box;
}
.col-container .column-box {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to bottom left, white, #efedf4, white, #efedf4, white)
2/ 0 0 2px 0 stretch;
min-height: 30vh;
}
.col-container > div:nth-child(odd) {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to bottom left, white, #efedf4, white, #efedf4, white)
2/0 2px 2px 0;
}
<div class="col-container">
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
<div class="column-box">
<div class="cover">
Image
</div>
</div>
</div>
Note: flex + flex-wrap would be a better option than float, each boxes of each rows will be the same height.
I need some help with some simple styling of two boxes I'm trying to make. I need to have some white space between them. I am using foundation, and have made one box which should fill medium-7 and another that will fill medium-5.
I just need some white space between them, but can't seem to do it.
Code:
<div class="main-container">
<div class="row gutter">
<div class="column small-12 medium-7 color border-right">
<div class="row">
<div class="column small-12">
</div>
</div>
</div>
<div class="column small-12 medium-5 color border-left">
<div class="row">
<div class="column small-12">
</div>
</div>
</div>
</div>
</div>
Css
.color {
background-color: #F2F2F2;
padding-top: 0.8333rem;
padding-bottom: 0.8333rem;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
border: 1px solid #CCC;
}
.border-left {
border-left: 12px solid #ffffff;
}
.border-right {
border-right: 12px solid #ffffff;
}
Have already tried with padding-left and padding-right, but nothing happens.
Also have tried with the border-left and right as you see, but then the box-shadow and border from the color class looks weird :(
What can I do here? any tricks?
Image where only color class is applied:
Image where border-left and right and color class is applied:
Add the following CSS to get the required output::
.border-right {
border-right: 12px solid #ffffff;
margin-right: 10px;
}
.color {
background-color: #F2F2F2;
padding-top: 0.8333rem;
padding-bottom: 0.8333rem;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
border: 1px solid #CCC;
display: inline-block;
width: 48%;
}
.row.gutter{
width: 100%;
text-align: center;
}
The code below displays some text (#_EVENTEXCERPT) and displays a picture (#_EVENTIMAGE). I want it so the text is on the left and the image on the right, so they are next to each other, as this code does. Below this there is a <a href="#_EVENTURL with lots of css which makes this link into an orange button. Currently, this orange button is being moved right with the image. I don't want this to happen, how can I move the image next to the text (as is currently), but leave the <a href to the left?
from style sheet:
#eventexcandimage {
width: 100%;
}
from .php file:
<div id="eventexcandimage">
<span style="width: 50%; float: left; "> #_EVENTEXCERPT </span>
#_EVENTIMAGE </div>
</li>
<li>
<span style="width:50%; " > <a href="#_EVENTURL" style=" -moz-box-shadow:inset 0px 1px 0px 0px #ed834e;
-webkit-box-shadow:inset 0px 1px 0px 0px #ed834e;
box-shadow:inset 0px 1px 0px 0px #ed834e;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ed834e), color-stop(1, #ed834e) );
background:-moz-linear-gradient( center top, #ed834e 5%, #ed834e 100% );
background-color:#ed834e;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
display:inline-block;
color:#fffffb;
font-family:Arial;
font-size:13px;
font-weight:bold;
font-style:normal;
height:35px;
line-height:35px;
width:111px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ed834e;
"> More Info / Book</a> </span>
Thank-you!
UPDATE: YI want the button to be on a new line below the text/image. It is currently above the image on the right, I don't know why.
Okay so I took your code and hopefully made it work the way you wanted it to(?)..Maybe.
Also just below your code I rewrote it not using span or li but rather div's as they're better for positioning than the former two. Here is link to the Fiddle as well it attached as a snippet.
.btn {
-moz-box-shadow:inset 0px 1px 0px 0px #ed834e;
-webkit-box-shadow:inset 0px 1px 0px 0px #ed834e;
box-shadow:inset 0px 1px 0px 0px #ed834e;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ed834e), color-stop(1, #ed834e) );
background:-moz-linear-gradient( center top, #ed834e 5%, #ed834e 100% );
background-color:#ed834e;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
display:inline-block;
color:#fffffb;
font-family:Arial;
font-size:13px;
font-weight:bold;
font-style:normal;
height:35px;
line-height:35px;
width:111px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ed834e;
}
.event {
width: 100%;
margin-top: 25px;
}
.event_info {
width: 100%;
margin-bottom: 5px;
}
.event-text {
float: left;
width: 50%;
}
.event-text > h3 {
margin: 0;
padding: 0;
}
.event-img {
width: 50%;
float: left;
}
.img {
width: 100%;
height: 125px;
background: red;
display: block;
}
<ul>
<li>
<div id="eventexcandimage">
<span style="width: 50%; float: left; ">
#_EVENTEXCERPT
</span>
<div style="width: 50%; float: left;">
<img class="img" src="" />
</div>
</div>
</li>
<li style="clear: both;"> <span style="width:50%; "> More Info / Book </span>
</li>
</ul>
<div class="event">
<div class="event-info">
<div class="event-text">
<h3>Event Title</h3>
<p>Text about your event</p>
</div>
<div class="event-img">
<img class="img" src="" />
</div>
</div> <!-- End event-info -->
<div style="clear: both;">
More Info / Book
</div>
</div>
I'm going to assume that your provided HTML has been cut off because some of your tags are not properly opened nor closed, but that's irrelevant as to why you're seeing the behavior you are.
span by default is displayed inline (everything naturally flowing on a line). You have your button in a span which means it's trying to stay on the same line as the things before it, which is doing what you're seeing. So what can you do? Well, the quickest fix is to make this button start on a new line. Change the display on the button to display:block. Block level elements take up the entire width, which will force a line break since something that is full width can't share the line with other things.
I have a div around an image like this:
<div class="q">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
The result is that the div is bigger than the image. I would like to wrap it around the image giving it the same height and width (without setting dimension)
img {
z-index: -1;
position: relative;
width:300px;
}
.q {
width:100%;
height:100%;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
I tried height and width 'auto' but it also doesn't work.
JsFiddle
You could add these:
img {
display: block;
}
.q {
float: left;
}
and remove:
.q {
width: 100%
height: 100%;
}
jsfiddle
I found this method the easiest,
<div style="display:inline-block">
<p style="float: left; padding-left: 20px">
<img src="Images/user.png" style="height: 200px; width: 207px" />
</p>
<h4 style="text-align: center">Client Zone</h4>
<p>So, he played with that child, the whole day long, and they were very merry.</p>
</div>
This example has text in it but, even if you take the <h4> and last <p> tag the
<div style="display:inline-block;" >
The "display:inline-block;" ensures the whole image gets wraped within the <div> tag.
Set the margin and padding of the div to zero:
div.q{
margin:0;
padding:0;
}
Here yo go
<html>
<head>
<style type="text/css">
img {
z-index: -1;
position: relative;
width:300px;
}
.q {
width:300px;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
</style>
</head>
<body>
<div class="q">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
<body>
</html>
I have implemented a facebook style search suggestion feature for my application . But , I am facing some issues here .
i) Below is the search box and the result div code :
<div align="right" style=" width:300px; float:right; margin-right:30px">
<input type="text" id="searchbox" class="searchbox" maxlength="100" style="color: rgb(170, 170, 170);"> <img src="../../../asset/images/search.png" style="margin:0 0 -5px 2px"><br><br>
<input type="hidden" value="http://www.plus-one-me.com/search/google/interests" id="formurl" name="formUrl">
<div id="display">
</div>
</div>
The search results get displayed within the #display div as below:
<div id="display" style="display: block;">
<div class="display_box" align="left"> Cakephp </div>
<div class="display_box" align="left"> Myspace </div>
<div class="display_box" align="left"> Php </div>
</div>
This is how the page looks before we enter anything in the search area :
Below is what the search results div is doing :
Basically , it brings down the menu in my main content area . So how can I fix this using CSS ?
Below are the styles :
of the menu div in the background (containing the options Home,History and Settings
.menuBar .submenu {
padding:4px 12px 5px 12px;
margin-right:8px;
border:2px solid #EEE;
text-decoration:none;
display:inline-block;
float:left;
font-size:13px;
-moz-border-radius:40px;
border-radius:40px;
-webkit-border-radius:40px;
-moz-box-shadow:0 1px 3px #777;
-webkit-box-shadow:0 2px 3px #777;
box-shadow:0 2px 3px #777;
color:#333;
background: -webkit-gradient(linear, 0 0, 0 70%, from(#765), to(#FFF));
background: -webkit-linear-gradient(#000, #FFF 70%);
background: -moz-linear-gradient(#BBB, #FFF 100%);
background: -ms-linear-gradient(#765, #FFF 70%);
background: -o-linear-gradient(#765, #FFF 1000%);
background: linear-gradient(#765, #FFF 70%);
-pie-background: linear-gradient(#765, #FFF 70%);
}
of my searchbox :
#searchbox {
border: 1px solid #000000;
padding: 3px;
width: 250px;
}
and the display_box for individual results :
.display_box {
border-top: 1px solid #DEDEDE;
font-size: 12px;
height: 30px;
padding: 4px;
}
the drop down menu has to have position:absolute applied to it. This takes it out of the flow of the page so it doesn't affect other elements.
As #Galen suggested, try css:
#display {
position: absolute;
}
You might want to instead have the html thats outputed be something more like
<ul id="display">
<li>result</li>
<li>result</li>
<li>result</li>
</ul>
Which if you did, you would have css along the lines of
#display {
position: absolute;
list-style-type: none; list-style: none;
margin: 0; padding: 0;
}
#display li {
display: block;
border-top: 1px solid #DEDEDE;
font-size: 12px;
height: 30px;
padding: 4px;
}