I have a requirement to like this image
As you can see in the 1st image there is a link called review and it is at center with black background.I wanted to do like that way and I did this way But the link is coming at top.How can I make as per the image.
Do it in this way
.outer {
width: 89px;
height: 89px;
-webkit-box-shadow: 0px 0px 10px #4d4d4d;
-moz-box-shadow: 0px 0px 10px #4d4d4d;
box-shadow: 0px 0px 10px #4d4d4d;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
border: solid white 3px;
overflow: hidden;
padding: 10px;
}
.image {
background: red;
padding: 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
width: 80px;
height: 80px;
overflow: hidden;
}
.bg {
background: url("http://www.computerhope.com/logo.gif");
width: 69px;
height: 69px;
}
.bg a {
margin-top: 40px;
padding-left: 10px;
color: #ffffff;
}
And
<div class="outer">
<div class="image">
<div class="bg"><br />
<a href="http://www.google.com">
Review
</a>
</div>
</div>
</div>
See this code in jsfiddle.
<img src="http://lorempixel.com/200/200/" />
<div>Some Text</div>
<img src="http://lorempixel.com/200/200/" />
<div class="div">Text</div>
And Here IS CSS
div {
position:absolute;
top:100px;
left:100px;
background:black;
opacity:0.5;
}
.div {
position:absolute;
top:100px;
left:300px;
background:black;
opacity:0.5;
}
a {
text-decoration:none;
color:red;
}
have a look at this fiddle demo
Related
I want the code to show up the 3 bars, and the 3 dots to eventually be dropdown options. For some reason the 1st out of the 3 dots does not want to be spaced correctly.
#dropdown {
background: #3f51b5;
padding: 30px;
margin: 0px;
}
#dot {
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
float: right;
}
#bar {
width: 25px;
height: 3px;
background: white;
margin: 5px;
}
<div id="dropdown">
<div id="dot"></div>
<div id="bar"></div>
<div id="dot"></div>
<div id="bar"></div>
<div id="dot"></div>
<div id="bar"></div>
</div>
Picture of what is returned:
This is a hard thing to do with floats.
A possible solution could be to wrap the dots and the bars within a div.
Afterwards you can position those wrapping divs in the style you like.
I used flexbox for this in the following snippet.
#dropdown {
display: flex;
justify-content: space-between;
align-items: center;
background: #3f51b5;
padding: 30px;
margin: 0px;
}
.dot {
width: 5px;
height: 5px;
margin: 5px;
background: white;
border-radius: 50%;
}
.bar {
width: 25px;
height: 3px;
background: white;
margin: 5px;
}
<div id="dropdown">
<div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
p.s.: you should use the keyword class instead of id for repeating elements. This might still work, but is considered bad practice and might break javascript implementations using that id.
You can easily do this with one element for each:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 10px;
height: 30px;
background:
radial-gradient(5px 5px at center, white 57%, transparent 61%) top/10px 10px;
float: right;
}
#bar {
width: 25px;
height: 22px;
margin: 4px 0;
background:
linear-gradient(#fff,#fff) top/100% 3px,
linear-gradient(#fff,#fff) center/100% 3px,
linear-gradient(#fff,#fff) bottom/100% 3px;
background-repeat:no-repeat;
float:left;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Here is another idea:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 5px;
height: 5px;
background:#fff;
box-shadow:
0 10px 0 #fff,
0 20px 0 #fff;
border-radius:50%;
float: right;
}
#bar {
width: 25px;
height: 23px;
padding:7px 0;
margin: 4px 0;
border-top:3px solid #fff;
border-bottom:3px solid #fff;
background:#fff content-box;
float:left;
box-sizing:border-box;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Also like this with pseudo element:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 5px;
height: 5px;
margin: 15px 0;
background:#fff;
border-radius:50%;
float: right;
position:relative;
}
#dot:before,
#dot:after{
content:"";
position:absolute;
height:inherit;
width:100%;
left:0;
background:inherit;
border-radius:inherit;
top:-8px;
}
#dot:after {
bottom:-8px;
top:auto;
}
#bar {
width: 25px;
height: 3px;
margin: 15px 0;
background:#fff;
float:left;
box-sizing:border-box;
position:relative;
}
#bar:before,
#bar:after{
content:"";
position:absolute;
height:inherit;
width:100%;
left:0;
background:inherit;
top:-8px;
}
#bar:after {
bottom:-8px;
top:auto;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Use something like if you want to check for first specific dot
#dropdown div:first-child {
position:relative;
top:4px
}
So I have a header that is shown in the snippet below.
My problem is I only want the shadow around the a tag to show on the part that has expanded out of its container div, to create the impression that the white edge is all one element.
Basically I only want the shadow on the left and on the right to go from the bottom of the a element to the bottom of the div. While also showing on the bottom of the a element.
Screenshot of what I'm after in case my descriptive capabilities are not functioning:
I've tried playing with z-index but haven't been able to get it to work.
My thought with z-index was to push the a behind the div, then pull the img in front of all.
I would prefer a CSS-only solution, as I don't want to have to modify the html, but if I have to I have to.
* {
padding: 0;
margin: 0;
}
div {
height: 50px;
width: 100%;
background: white;
box-shadow: 0px 0px 5px #000000;
}
a {
display: inline-block;
margin-left: 30px;
padding: 10px;
height: 60px;
background: white;
box-shadow: 0px 0px 5px #000000;
}
img {
height: 100%;
}
<div>
<a href="#">
<img src="https://via.placeholder.com/200x100">
</a>
</div>
Here is box-shadow syntax,
box-shadow: offset-x | offset-y | blur-radius | spread-radius | color
Try reducing it's spread-radius and increase it shadow towards y-axis.
* {
padding: 0;
margin: 0;
}
div {
height: 50px;
width: 100%;
background: white;
box-shadow: 0px 0px 5px #000000;
}
a {
display: inline-block;
margin-left: 30px;
padding: 10px;
height: 60px;
background: white;
position: relative;
}
a:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0px 0px 5px #000000;
z-index: -1;
}
img {
height: 100%;
}
<div>
<a href="#">
<img src="https://via.placeholder.com/200x100">
</a>
</div>
EDIT:-
Using jquery you can compute the css for span dynamically. Check this.
Html modified, added a <span> below anchor tag and added shadow to the span
* {
padding: 0;
margin: 0;
}
div {
height: 50px;
width: 100%;
background: white;
box-shadow: 0px 0px 5px #000000;
}
a {
display: inline-block;
margin-left: 30px;
padding: 10px;
height: 60px;
background: white;
/*box-shadow: 0px 0px 5px #000000;*/
z-index:100;
position:absolute;
}
.shadow {
display: inline-block;
margin-left: 30px;
padding: 10px;
margin-top:50px;
height: 10px;
width:120px;
background: white;
box-shadow: 0px 0px 5px #000000;
z-index:0;
position:absolute;
}
img {
height: 100%;
}
<div>
<a href="#">
<img src="https://via.placeholder.com/200x100">
</a>
<span class="shadow">r
</span>
</div>
You can get it by css pseudo element.
Just add css part
a:after {
content:'';
position:absolute;
bottom:0px;
left:0px;
height:20px;
display:block;
width:100%;
box-shadow:5px 5px 5px -5px #000000;
}
a:before {
content:'';
position:absolute;
bottom:0px;
left:0px;
height:20px;
display:block;
width:100%;
box-shadow:-5px 5px 5px -5px #000000;
}
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
div {
height: 50px;
width: 100%;
background: white;
box-shadow: 0px 0px 5px #000000;
}
a {
display: inline-block;
margin-left: 30px;
padding: 10px;
height: 60px;
background: white;
position:relative;
/* box-shadow:0px 5px 5px -5px #000000; */
}
a:after {
content:'';
position:absolute;
bottom:0px;
left:0px;
height:20px;
display:block;
width:100%;
box-shadow:5px 5px 5px -5px #000000;
}
a:before {
content:'';
position:absolute;
bottom:0px;
left:0px;
height:20px;
display:block;
width:100%;
box-shadow:-5px 5px 5px -5px #000000;
}
img {
height: 100%;
}
<div>
<a href="#">
<img src="https://via.placeholder.com/200x100">
</a>
</div>
I created this sign up form however I cant seem to have two div tags be together in one row, it only happends whenever I minimize the window. Any suggestions? id like to place the register with facebook and g+ under the text side to side as well as the two text fields.
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo-signup">
<img class="img-responsive" src="uv.png">
</div> <!-- logo -->
<div class="signup-header">
<label class="uv-header">United Volunteers</label>
<label class="sm-title">Register Using Your Social Media Account</label>
<button type="submit" class="btn-facebook-signup">Register With Facebook</button>
<button type="submit" class="btn-gmail-signup">Register With Google+</button>
</div> <!-- login-form -->
</div> <!-- container-fluid -->
</div> <!-- col -->
<div class="col-md-offset-2 col-md-8 ">
<div class="container-fluid">
<div class="signup-form2">
<label class="signup-title"><span>Personal Information</span></label>
<div class="signup-labels">
<input type="text" class="form-input" placeholder="First Name" style="margin-right:10px">
<input type="text" class="form-input" placeholder="Last Name">
</div>
<label class="signup-title"><span>Address Information</span></label>
<label class="signup-title"><span>Skills</span></label>
<label class="signup-title"><span>Volunteering Area</span></label>
<label class="signup-title"><span>Account Information</span></label>
</div>
</div>
</div>
.signup-header {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
overflow: hidden;
background-color: white;
padding: 25px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
}
.signup-form2 {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
background-color: white;
padding: 10px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.uv-header{
font-weight:bold;
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
.sm-title {
float:left;
padding-left:225px;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.sm-signup{
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
#logo-signup {
top:70px;
left: 17%;
transform: translateX(-50%);
position:absolute;
background-color: white;
background-size: 170px auto;
background-repeat: no-repeat;
height: 170px;
width: 170px;
padding: 0px;
border: 5px solid white;
box-shadow: 1px 3px 2px grey;
z-index: 1;
}
h1 {
font-weight:bold;
font-size:35px;
font-family:Candara;
text-align: center;
margin: 100px auto 50px auto;
}
a {
text-decoration: none;
}
span{
background:#fff;
padding:0 10px;
}
.signup-title{
text-align:center;
margin-top:20px;
margin-bottom:20px;
width:100%;
border-bottom:1px solid #000;
line-height:0.1em;
}
.social_media {
text-align:center;
position:relative;
top:-75px;
}
.label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.signup-labels{
float:left;
}
.btn-signup {
background-color: firebrick;
font-family:Candara;
font-size: 20px;
color: white;
padding: 10px;
border: 1px solid firebrick;
border-radius: 5px;
box-shadow: 2px 4px 4px #330000;
width: 200px;
margin:auto;
margin-top:200px;
display:block;
}
.btn-facebook-signup {
background-image: url(fb.gif);
background-color: #3b5998;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.btn-gmail-signup {
background-image: url(g+.gif);
background-color: #dc4a38;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.form-input {
width:80%;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
.social_media-signup {
display:inline-block;
}
i suggest u to forget about float:left. it's an old trick, try the new one with flex.
1st. using a wrap over them and add display flex in your wrap,
2nd.then use the flex-direction: row.
u can find about flex in here about flex
wish it would help u to get a clue, this is my fiddle
.parent{
position:relative;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
justify-content:center;
width:200px;
height:200px;
background:#ccc;}
.child{
width:50px;
height:50px;
background:#000;
margin:1px;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
id like to place the register with facebook and g+ under the text
There was a small modification to be done in your code, just add two separate divs to t your "United Volunteers" label ,"Register Using Your Social Media Account" labels and to your Social media buttons.
facebook and g+ under the text side to side as well as the two text
fields.
it is automatically adjusted.And i mad little changes for your form and CSS.See full page, for the complete demonstration.
.signup-header {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
overflow: hidden;
background-color: white;
padding: 25px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
}
.signup-form2 {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
background-color: white;
padding: 10px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.uv-header{
font-weight:bold;
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
.sm-title {
float:left;
padding-left:225px;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.sm-signup{
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
#logo-signup {
top:70px;
left: 17%;
transform: translateX(-50%);
position:absolute;
background-color: white;
background-size: 170px auto;
background-repeat: no-repeat;
height: 170px;
width: 170px;
padding: 0px;
border: 5px solid white;
box-shadow: 1px 3px 2px grey;
z-index: 1;
}
h1 {
font-weight:bold;
font-size:35px;
font-family:Candara;
text-align: center;
margin: 100px auto 50px auto;
}
a {
text-decoration: none;
}
span{
background:#fff;
padding:0 10px;
}
.signup-title{
text-align:center;
margin-top:20px;
margin-bottom:20px;
width:100%;
border-bottom:1px solid #000;
line-height:0.1em;
}
.social_media {
text-align:center;
position:relative;
top:-75px;
}
.label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.signup-labels{
float:left;
}
.btn-signup {
background-color: firebrick;
font-family:Candara;
font-size: 20px;
color: white;
padding: 10px;
border: 1px solid firebrick;
border-radius: 5px;
box-shadow: 2px 4px 4px #330000;
width: 200px;
margin:auto;
margin-top:200px;
display:block;
}
.btn-facebook-signup {
background-image: url(fb.gif);
background-color: #3b5998;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.btn-gmail-signup {
background-image: url(g+.gif);
background-color: #dc4a38;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.social_media-signup {
display:inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo-signup">
<img class="img-responsive" src="uv.png">
</div> <!-- logo -->
<div class="signup-header">
<div class="row"> <!--MODIFICATION-->
<label class="uv-header">United Volunteers</label>
<label class="sm-title">Register Using Your Social Media Account</label>
</div> <!--MODIFICATION-->
<br> <!--MODIFICATION-->
<div class="row"> <!--MODIFICATION-->
<button type="submit" class="btn-facebook-signup">Register With Facebook</button>
<button type="submit" class="btn-gmail-signup">Register With Google+</button>
</div> <!--MODIFICATION-->
</div> <!-- login-form -->
</div> <!-- container-fluid -->
</div> <!-- col -->
<div class="col-md-offset-2 col-md-8 ">
<div class="container-fluid">
<div class="signup-form2">
<label class="signup-title"><span>Personal Information</span></label>
<div class="signup-labels">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" style="margin-right:10px">
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
<label class="signup-title"><span>Address Information</span></label>
<label class="signup-title"><span>Skills</span></label>
<label class="signup-title"><span>Volunteering Area</span></label>
<label class="signup-title"><span>Account Information</span></label>
</div>
</div>
</div>
In AngularJS, this can be achieved using layout="row":-
<div style="cursor:pointer;" layout="row">
<div><i class="material-icons ">call</i></div>
<div style="padding-top:4px">Personal Information</div>
</div>
PS: Just FYI, the <i> tag is for including icons in this example, so call will show a call-icon . It comes from angular material-icons package. You can replace it using any other tag as well.
I have the following button on my site:
http://jsfiddle.net/32u5x5uf/
I'd first like to move the span circle to be exactly in the center of the main button. I'd then like if I can somehow "merge" the two shapes together in CSS. So basically remove the top half of the circle and the main bar that cuts through the middle of the circle.
.full-circle {
border: 2px solid #1588CB;
height: 35px;
width: 35px;
-moz-border-radius:30px;
-webkit-border-radius: 30px;
position:absolute;
bottom:-20px;
}
button {
background:#ffffff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}
<button>Learn More
<span class="full-circle">+</span>
</button>
.full-circle {
border: 2px solid #1588CB;
height: 35px;
width: 35px;
-moz-border-radius:30px;
-webkit-border-radius: 30px;
position:absolute;
bottom:-20px;
}
button {
background:#ffffff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}
/* overides ... */
.full-circle {
border-radius: 0 0 30px 30px;
border-top: none;
height: 17px;
background: #FFF;
left: 50%;
margin-left: -17px;
bottom: -19px;
line-height: 0;
}
<button>Learn More
<span class="full-circle">+</span>
</button>
The Answer above by Turnip is actually kind of a cheat with same
background-color
If that's not the case then you should go with this:
div {
background-color: #80C5A0;
width: 200px;
height: 100px;
border-radius: 50% / 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
<div></div>
I'm making a titled box with css.
And my code is something like this.
I've ignored some attributes like width or height in my code.(Because I don't know why stackoverflow keeps telling me that I 've got too many codes here..)
.sponsor_info {
border-radius: 10px;
border: 1px solid #eeeeee;
width:200px;
height:50px;
padding: 0px;
}
.sponsor_info .headbar {
border-radius:10px 10px 0px 0px;
width:200px;
height: 40px;
margin-top: 0px;
background-color: #8BBE26;
}
.sponsor_info .headbar p {
font-size: 20px;
font-family: arial;
color:white;
line-height: 100%;
margin-left: 3%;
margin-top:0px;
}
<div class="sponsor_info">
<div class="headbar">
<p>Sponsor Info</p>
</div>
</div>
I can get something like below
The question now is: I don't know why there is some space between the outer grey border and the inner green bar.
.sponsor_info {
height: 200px;
border-radius: 10px;
border: 1px solid #eeeeee;
padding: 0px;
}
.sponsor_info .headbar {
height: 100px;
border-radius: 10px 10px 0px 0px;
margin-top: 0px;
background: #8BBE26;
}
.sponsor_info .headbar p {
line-height: 100px;
margin-left: 3%;
margin-top: 0px;
}
<div class="sponsor_info">
<div class="headbar">
<p>Sponsor Info</p>
</div>
</div>
change it to:
.sponsor_info .headbar p {
line-height: 100%;
margin-left: 3%;
margin-top: 0px;
}