I'm trying to float two divs and set background images to them. But the desired look I couldn't get.
This is what I wanna do
But this is what I get
My HTML
<div class="orange_bk">Outstanding</div> <div class="black_bk">Play</div>
css
.orange_bk{
float: left;
background: url(../images/Outstanding%20button.png);
background-position: 8px -10px;
width: 45%;
height: 33px;
background-repeat: no-repeat;
line-height: 23px;
text-align: center;
font-size: 15px;
}
.black_bk{
float: right;
background: url(../images/Play%20Button.png);
background-position: 8px -10px;
width: 45%;
height: 33px;
background-repeat: no-repeat;
line-height: 23px;
text-align: center;
font-size: 15px;
}
These are the two images I used
You could ditch the images altogether and use background: #fb892b; for the orange and set a gradient over the top. Also use border-radius for the rounded corners
Quick jsfiddle using gradients and border-radius
.orange_bk, .black_bk {
color:#fff;
float: left;
background: #fb892b;
width: 50%;
height: 33px;
line-height: 2em;
text-align: center;
font-size: 15px;
border-radius:.25em 0 0 .25em;
padding:.25em 0;
font-weight:bold;
font-family: sans-serif;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0.00)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
background-image: linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
}
.black_bk {
float: right;
background: #000;
border-radius: 0 .25em .25em 0
}
Try to set line-height to be the same as the height of the background (33px).
Also both divs have width: 45%; ..what do you want to do with the rest of 10% that the element that contains these elements has ?
You can tidy this code up a lot and keep it much simpler. E.g. wrap an element around those two divs and do something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.wrap {
width: 598px;
overflow: hidden;
}
.wrap div {
width: 50%;
line-height: 58px;
text-align: center;
font-size: 15px;
}
.orange_bk {
float: left;
background: url(../images/Outstanding%20button.png) no-repeat 0 0;
}
.black_bk{
float: right;
background: url(../images/Play%20Button.png) no-repeat 0 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="orange_bk">Outstanding</div> <div class="black_bk">Play</div>
</div>
</body>
</html>
The orange div is simply to long for your orange BG. Try adding a max-width for .orange_bk!
You should also set id to display:block and add a padding-top, so that the text is vertically centered
Try this:
* {
margin: 0;
padding: 0;
}
body {
color: white;
}
.orange_bk{
float: left;
background: url(r55XB.png);
width: 50%;
height: 26px;
padding-top: 7px;
background-repeat: no-repeat;
text-align: center;
font-size: 15px;
}
.black_bk{
float: right;
background: url(tRfQv.png);
width: 50%;
height: 26px;
padding-top: 7px;
background-repeat: no-repeat;
text-align: center;
font-size: 15px;
}</style>
Using percentage values with a non-repeating background makes it look awkward when the window is sized normally so you may want to change something related to that.
.main{width:400px;}
.orange_bk{
float: left;
background: url(r55XB.png);
/*background-position: 8px -10px;*/
width: 45%;
height: 58px;
background-repeat: no-repeat;
line-height: 58px;
text-align: center;
font-size: 15px;
text-shadow: 2px 2px 2px #000;
color:#FFF;
}
.black_bk{
float: left;
background: url(tRfQv.png);
background-position: -119px 0px;
width: 45%;
height: 58px;
background-repeat: no-repeat;
line-height: 58px;
text-align: center;
font-size: 15px;
text-shadow: 2px 2px 2px #000;
color:#FFF;
}
try this solution.....
and also please modify the images into same size
Related
I want to make a card look like this, the border or the sides of the card are semi-circular, is it possible to make it with css? if yes, how? Thank you in advance
.wrapper {
}
.content-card {
width: 315px;
height: 131px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
border-radius: 8px;
}
<div class="wrapper">
<div class="content-card">
</div>
</div>
Multiple background can do it:
.content-card {
width: 300px;
height: 150px;
background:
radial-gradient(8px at left ,#0000 98%,#fff) left ,
radial-gradient(8px at right,#0000 98%,#fff) right;
background-size: 50.5% 25px;
background-repeat:repeat-y;
filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.12));
border-radius: 8px;
}
body {
background: pink;
}
<div class="content-card">
</div>
The old way - border-image
It permits you to use the willing image for borders, it was widely use for this kind of cases. You can have repeat option on it to allow different box's sizes with the same style.
The mozilla doc is quite explicit with good examples of it : https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
The recent way - without image
You have the possibility to use pseudo-element :after and :before and stylize those elements with a repeated background using radial-gradient.
body {
background-color: #ffaaaa;
}
.ticket {
position: relative;
width: 300px;
height: 170px;
margin: 10px;
border-radius: 10px;
background: white;
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
}
.ticket:before,
.ticket:after {
content: '';
position: absolute;
top: 5px;
width: 6px;
height: 160px;
}
.ticket:before {
left: -5px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 50%, #FBFBFB 100%) -7px -8px/16px 16px repeat-y;
}
.ticket:after {
left: 300px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 0%, #FBFBFB 100% ) -3px -7px / 16px 16px repeat-y;
}
<div class="ticket"></div>
I am trying to get a vertical effect for a sidebar on a page. I have tried the deg option but it still shows a horizontal line
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background-image: linear-gradient(90deg, #1559EC, #1559EC);
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.sidebar:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
<div class="sidebar">
The quick brown fox
</div>
The issue is not the gradient but the pseudo element. The gradient is using the same color so the angle is useless. What you need is to invert height/width values on the pseudo element and adjust the direction of its gradient. You can also replace the gradient of the main element by simple color:
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background:#1559EC;
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
.sidebar:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 50%;
height: calc(100% - 4px);
background: linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
<div class="sidebar">
The quick brown fox
</div>
And you can simplify it like below using multiple background on the main element:
.sidebar {
position: relative;
display: inline-block;
padding: 15px 25px;
background:
linear-gradient(to right,rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)) 2px 2px/50% calc(100% - 4px)no-repeat,
#1559EC;
color: #fff;
font-size: 36px;
font-family: Arial;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
}
<div class="sidebar">
The quick brown fox
</div>
The gradient you're trying to change has both colors the same so you won't see the difference. The easiest way to make what you want IS using a generator since the code for each render engine is a bit different.
The easiest keyword solution is to use "to direction" instead of a degree. See below. The first box is top to bottom and the second is left to right.
Your example has a pseudo-class (:after) adding a second gradient to create the hard line. You could achieve a similar effect by adding more stops to the gradient.
.box{
width: 100px;
height: 100px;
margin-bottom: 20px
}
.gradient1 {
background: linear-gradient(to bottom, #8fc400, #29b8e5);
}
.gradient2 {
background: linear-gradient(to right, #8fc400, #29b8e5);
}
.gradient3 {
background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
}
<div class="box gradient1">
</div>
<div class="box gradient2">
</div>
<div class="box gradient3">
</div>
I'm attempting to create a button that contains a gradient covering the whole button, then with an image on just a portion of the button.
(note: for ease of the question I've changed my code to a div, but the outcome remains the same)
Initially this was successful doing such:
<div class="myBtn_1">test button one</div>
.myBtn_1
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'),
linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
}
the jfiddle representing this can be found: here
HOWEVER I want some border around my image within the button/div, so I added background-position 5px 5px to the css, as well as explicitly setting the background-size (auto 40px). This does add padding to the image, but it also adds padding to the gradient.
again, see the 2nd class in the same jfiddle
Question: how can I create a button/div in css that has a gradient covering the full background, then add an image that has padding around it?
You can comma delineate the individual background properties too.
.myBtn_3
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 40px, auto auto;
width: 200px;
height: 50px;
padding-left: 65px;
background-position: 5px 5px, 0 0;
}
<div class="myBtn_3">
test button two
</div>
Why don't you use
position: absolute;
on the image and just put it inside the div
.myBtn_1
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'),
linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
}
.myBtn_2
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 40px;
width: 200px;
height: 50px;
padding-left: 65px;
background-position: 5px 5px;
}
.myBtn_3
{
border: solid 1px #ff00ff;
background-image: linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
position: relative;
}
.myBtn_3 img {
position: absolute;
left: 5px;
top: 5px;
height: calc(100% - 10px)
}
<div class="myBtn_1">test button one</div>
<br />
<div class="myBtn_2">
test button two
</div>
<br />
<div class="myBtn_3">
test button three
<img src="https://picsum.photos/21?image=1080">
</div>
I am trying to make an A tag fill the parent TD element. However, no matter what I try it doesn't seem to work.
I have viewed many various other Stack Overflow pages and they all state to do
child-element{
display: block;
width: 100%;
}
But this has not seemed to work in my case.
html {
font-family: "Times New Roman", Times, serif;
color: white;
}
#wrapper {
background-color: black;
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
}
a {
color: white;
text-decoration: none;
background-color: none;
cursor: pointer;
}
#wrapper,
#header,
#main {
padding: 10px 15px;
margin: 0 auto 10px auto;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
}
#header {
min-width: 40vw;
max-width: 50vw;
}
#main {
min-height: 65vh;
}
.nav-link {
float: left;
padding: 10px 15px;
margin: 0 5px 0 5px;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.nav-link a {
display: block;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
}
<body>
<div id="wrapper">
<div id="header">
<table align="center">
<td class="nav-link">Main</td>
<td class="nav-link">Test</td>
<td class="nav-link">FAQ</td>
</table>
</div>
<div id="main">
<h1 style="line-height: 0%">Header</h1>
<p style="line-height: 0%; font-size: 1vw">_________________________________________________________________________________________________________</p>
<br>
<br>
</div>
</div>
</body>
If you would like to see this displayed you can view here: https://jsfiddle.net/wverhe/8gcypffm/
Remove the padding from .nav-link and add it to the .nav-link a. You can also remove the width and height from links since they will get resized from the padding.
html {
font-family: "Times New Roman", Times, serif;
color: white;
}
#wrapper {
background-color: black;
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
}
a {
color: white;
text-decoration: none;
background-color: none;
cursor: pointer;
}
#wrapper,
#header,
#main {
padding: 10px 15px;
margin: 0 auto 10px auto;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
}
#header {
min-width: 40vw;
max-width: 50vw;
}
#main {
min-height: 65vh;
}
.nav-link {
float: left;
margin: 0 5px 0 5px;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.nav-link a {
display: block;
padding: 10px 15px;
/* width: 100%; */
/* height: 100%; */
background-color: rgba(255, 255, 255, 0.3);
}
<body>
<div id="wrapper">
<div id="header">
<table align="center">
<td class="nav-link">Main</td>
<td class="nav-link">Test</td>
<td class="nav-link">FAQ</td>
</table>
</div>
<div id="main">
<h1 style="line-height: 0%">Header</h1>
<p style="line-height: 0%; font-size: 1vw">_________________________________________________________________________________________________________</p>
<br>
<br>
</div>
</div>
</body>
https://jsfiddle.net/8gcypffm/4/
I want to create a button bar on top of the page, with div containers that contain images to use them as flat button. My problem is that I cannot get the alignment correctly.
Is there an additional way to highlight the last clicked button, so that you can see which button on the buttonbar is active without using javascript?
Here is my first approach:
<html>
<head>
<title>
</title>
<style>
#top {
position: fixed;
background-color: #AAA;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
left: 0px;
top: 0px;
width: 100%;
height: 60px;
padding: 0px;
border: thin solid rgba(0,0,0,0.6);
color: #444444;
font-family: Droid sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
-moz-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
}
.flatBtn2 {
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.buttonBar {
float:left;
}
</style>
</head>
<body>
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<div id="firstButton" class="flatBtn2" />
<div id="secondButton" class="flatBtn2" />
<div id="thirdButton" class="flatBtn2" />
</div>
</div>
</body>
</html>
#top {
position: fixed;
background-color: #AAA;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
left: 0px;
top: 0px;
width: 100%;
height: 60px;
padding: 0px;
border: thin solid rgba(0, 0, 0, 0.6);
color: #444444;
font-family: Droid sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
}
.flatBtn2 {
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
background-color: transparent;
border: none;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.flatBtn2:focus {
background-color: #eee;
}
.buttonBar {
float: left;
}
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<button id="firstButton" class="flatBtn2" >Button 1</button>
<button id="secondButton" class="flatBtn2" >Button 2</button>
<a id="thirdButton" href="#" class="flatBtn2">A 3</a>
</div>
</div>
First of all if you want to use button, then you should you the <button> tag and add the background image through css. You can also manipulate the states in css, what you are seacrhing for is :focus and :active, so you have two rules for your buttons. The normal button rule with the main background-image and an other rule button:focus, button:active where you can load an other image or do something else.
See fiddle for a working example. I added the needed styles at the end of your css.
Hope this helps!