I have Created diamond successfully by using following code
CSS:
.diamond {
height: 75px;
width: 75px;
border-radius:15px;
transform: rotate(45deg);
float: left;
margin-left: 18%;
font-size:50px;
color: white;
font-family:Adequate-ExtraLight;
}
<div class="diamond" style="background-color:#ff4d4d">48</div>
produced output by above code has tilted text,
but I want to make text horizontally. I tried but failed.
Could any one please tell me how to achieve this.
<div class="diamond" style="background-color:#ff4d4d">
<div class="text-inside-diamond">48</div>
</div>
.text-inside-diamond {
transform: rotate(-45deg);
margin-left: 10%;
}
the margin-left of the inside class is just to center the div
your diamond class stays the way it is.
.diamond {
height: 75px;
width: 75px;
border-radius:15px;
transform: rotate(45deg);
float: left;
margin-left: 18%;
font-size:50px;
color: white;
font-family:Adequate-ExtraLight;
}
.content{
transform: rotate(-45deg);
}
<div class="diamond" style="background-color:#ff4d4d">
<div class="content">
48
</div>
</div>
or you can make absolute position of div to make that happen, also can be done by z index in css
.diamond {
position: absolute;
height: 75px;
width: 75px;
border-radius:15px;
transform: rotate(45deg);
float: left;
margin-left: 18%;
font-size:50px;
color: white;
font-family:Adequate-ExtraLight;
}
.content{
position: absolute;
height: 75px;
width: 75px;
border-radius:15px;
float: left;
margin-left: 20%;
font-size:50px;
color: white;
font-family:Adequate-ExtraLight;
}
<div>
<div class="diamond" style="background-color:#ff4d4d">
</div>
<div class="content">
48
</div>
</div>
Related
I want to create a div like below.
And the html is
<div class="col-lg-3 col-md-3 col-sm-3">
<div style="background-color: rgb(236, 236, 236); border-radius: 100px; width: 80%; height:80%; padding: 50px">
<h2 style="width: 100%; height: 100%" />Text</h2>
</div>
</div>
This work fine in 100% page view but if i zoom in or out the page the background of the 'text' div's shape is changing. Can you help me to fix this. Basically I want a scallable background for the div.
Use a pseudo-element...
body {
text-align: center;
}
:root {
--val: 200%;
}
h2 {
display: inline-block;
margin-top: 50px; /* adjust as required - or align some other way*/
position: relative;
}
h2::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--val);
padding-bottom: var(--val);
transform: translate(-50%, -50%);
background: lightgrey;
z-index: -1;
border-radius: 50%;
}
<h2>Text</h2>
I am trying to overlap two elements using only CSS.
So far I have found one way of doing this. I am however wondering if there are other/better ways of accomplishing this.
The only method I have found, when moving two elements closer vertically, is to subtract a bottom-margin from te bottom element. This is to account for the left over space - and then to subtract the same margin from the upper element to move it down. I have not used this method before and I wonder if it is the best way of accomplishing this overlapping effect?
body {
width: 100%;
height: 100%;
background: lightgrey;
}
.bottom, .top{
width: 20%;
padding-bottom: 20%;
}
.top {
background: blue;
margin-bottom: -250px;
}
.bottom {
padding-top:250px;
margin-bottom: -250px;
background: red;
overflow: hidden;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div class="top"></div>
<div class="bottom"></div>
html, body {
margin: 0;
padding: 0;
}
.parent {
position: relative;
width: 20%;
}
.child {
height: 200px;
background-color: blue;
}
.child--foreground {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
border-radius: 30px;
}
<div class="parent">
<div class="child child--background">
Background
</div>
<div class="child child--foreground">
Foreground
</div>
</div>
if you're trying to place an element over another, I think you should use positioning https://css-tricks.com/almanac/properties/p/position/
I think that's more simple
body {
width: 100%;
height: 100%;
background: lightgrey;
}
.bottom, .top{
width: 20%;
padding-bottom: 20%;
}
.top {
background: blue;
}
.bottom {
background: red;
border-radius: 50% 50% 0 0;
padding-top: 250px;
transform: translateY(-50%);
}
<div class="top"></div>
<div class="bottom"></div>
Attached is a brief mockup of what I need to create. The div not only needs to skew on the bottom, but the next row will need to skew to the top.
Is there a clean way this can be done using CSS? I've tried some CSS solutions ( e.g http://jsfiddle.net/mXLgF/ ) but can not get this effect.
My current HTML / CSS is at this stage:
<div class="skew_bottom_right">
<div style="height: 300px; background: url('http://placehold.it/850x350');">
</div>
</div>
.skew_bottom_right div:after {
content: '';
position: absolute;
left: 0;
bottom: -60px;
width: 100%;
height: 115px;
background: white;
-webkit-transform: skewY(8.5deg);
-moz-transform: skewY(8.5deg);
-ms-transform: skewY(8.5deg);
-o-transform: skewY(8.5deg);
transform: skewY(8.5deg);
-webkit-backface-visibility: hidden;
z-index: 5;
}
Each of those containers will eventually made into a slide, so ideally they should be div's with background images or containing divs having a background image.
Your code is pretty good.
Just needed some minor adjustments...
.container{
overflow:hidden;
}
.parallelogram {
width: 600px;
height: 100px;
margin: 30px 0;
transform: skewY(5deg);
background: gray;
overflow:hidden;
position:relative;
}
.parallelogram.header {
height: 150px;
margin: -30px 0;
}
.parallelogram.footer {
height: 150px;
margin: -30px 0;
}
.image{
background: url(http://placekitten.com/300/300);
background: blue;
width: calc(100% / 3);
height: 100%;
display: inline-block;
float: left;
border: 3px solid white;
box-sizing: border-box;
}
<div class="container">
<div class="parallelogram header"></div>
<div class="parallelogram">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
<div class="parallelogram footer"></div>
</div>
How do I create this in css? I'm having trouble aligning the circle divs vertical middle.
See image:
Here what I've done: https://jsfiddle.net/5odbwkn5/
.gray-btn1 {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-left:-20px;
position: relative;
float:left;
}
.gray-btn {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-right: -20px;
position: relative;
float:right;
}
.gray-mid {
background-color: #5dd6e4;
text-align:center;
}
<div class="gray-mid">
<div class="gray-btn1"><span class="fa-connectdevelop">left</span>
</div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span>
</div>
<div style="height:100px">middle</div>
</div>
you can use pseudoelements as before and after to make easily that effect:
.container:before {
content:' ';
display:block;
height: 30px;
width:30px;
background-color:#999;
border-radius:15px;
position:absolute;
left:-15px;
top:7px;
}
.container:after {
content:' ';
display:block;
height: 30px;
width:30px;
background-color:#999;
border-radius:15px;
position:absolute;
right:-15px;
top:7px;
}
here is the FIDDLE I made for you as an example.
Edited: I updated the fiddle to be sure that the circles ("before" and "after") are positioned behind the container. And move slightly the elements to make it more simillar to your image.
First of all, you should not duplicate styles. Instead, extend common btn styles with specific for left button.
You can position buttons in the middle with the help of position: absolute relatively to the parent and top: 50%, margin-top: -25px fixes vertical offset in this case.
As the result it will become:
.gray-mid {
margin-left: 30px;
width: 400px;
background-color: #5dd6e4;
text-align:center;
position: relative;
}
.gray-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
right: -20px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.gray-left {
left: -20px;
right: inherit;
}
<div class="gray-mid">
<div class="gray-btn gray-left"><span class="fa-connectdevelop">left</span></div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span></div>
<div style="height:100px">middle</div>
</div>
Is this what you're looking for?
There are multiple ways which you can achieve vertical centering. There's even a really easy to follow guide posted by Chris Coyier here that you can reference whenever you need.
This is basically what I go to when I need to center something vertically.
.parent-with-centered-content {
position: relative;
}
.parent-with-centered-content > .child-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
You could use pseudo elements for this kind of functionality, and position them accordingly.
div {
position: relative;
display: inline-block;
height: 30px;
width: 200px;
background: gray;
margin: 30px;
text-align: center;
line-height: 30px;
}
div:before,
div:after {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background: gray;
top: 5px;
z-index: -1;
}
div:before {
left: -10px;
}
div:after {
right: -10px;
}
<div>This is some text</div>
I did not try to match your fonts, but using background image, and just a little css, here you go:
https://jsfiddle.net/z8z3h75h/
<div id="background">
<div class="left">
FACEBOOK
</div>
<div class="right">
become a fan
</div>
</div>
#background {
background-image:url(http://s28.postimg.org/loa285ugt/1_SEOh.jpg);
width:409px;
height:41px;
}
.left {
float:left;
margin-left:30px;
color:white;
margin-top:10px;
}
.right {
float:right;
margin-right:40px;
color:white;
margin-top:10px;
}
The correct way to do that is to set top: 50% and translate or set margin on :pseudo elements
:root{text-align: center;padding: 40px 0 0 0}
.container{
display: inline-block;
position: relative;
padding: 6px 10px
}
.container, .container:before, .container:after{
background: #a6a195;
}
.container:before, .container:after{
content: '';
position: absolute;
top: 50%;
margin-top: -10px; /** height/2 **/
width: 20px;
height: 20px;
border-radius: 50%
}
.container:before{left: -10px}/** width/2 **/
.container:after{right: -10px}
.container div{display: inline; color: white}
.container .txt1{margin-right: 20px}
.container .txt2{font-size: 12px}
<div class="container">
<div class="txt1">FACEBOOK</div>
<div class="txt2">Become a fan</div>
</div>
How can I vertically stack more than one element when using rotate without having to resort to statically fixing the spacing (in my case using pixel-width from bottom) between the elements?
Here's my current HTML and CSS/SASS:
HTML:
<div class="results-indicator-container">
<div class="results-indicator-label-won">5x</div>
<div class="results-indicator-label-lost">5x</div>
<div class="results-indicator-label-tied">5x</div>
</div>
CSS/SASS:
.results-indicator-container {
bottom: 51px;
height: 59px;
left: 167px;
position: relative;
width: 16px;
font-size: 12px;
float: left;
.results-indicator-label {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position: absolute;
bottom: 0px;
}
.results-indicator-label-won {
#extend .results-indicator-label;
}
.results-indicator-label-lost {
#extend .results-indicator-label;
bottom: 25px;
}
.results-indicator-label-tied {
#extend .results-indicator-label;
bottom: 50px;
}
}
Here's a screenshot of what my vertically stacked elements currently look like.
here is a jsFiddle,
please let me know what you think.
.results-indicator-container {
height: 59px;
left: 167px;
width: 16px;
font-size: 12px;
float: left;
}
.results-indicator-label {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
float:left;
clear:left;
height:20px;
width:20px;
border-bottom: 1px solid #CCC;
}
.won{
}
.lost{
}
.tied{
}
<div class="results-indicator-container">
<div class="results-indicator-label won">5x</div>
<div class="results-indicator-label lost">5x</div>
<div class="results-indicator-label tied">5x</div>
</div>