how will i place these to divs side by side i have looked online and in other forums but they seemed a bit to confusing because my code is creating a "paper" effect and theirs is not so im really stuck at this moment.. does any body know how to do this? i have a jsfiddle HERE
this site it making me post code to include a js fiddle so here is the code
/** Playstation **/
.info, .info:before, .info:after
{
background-color: blue;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
.infops
{
position: relative;
width: 50%;
padding: 2em;
margin: 50px auto;
}
.infops:before, .infops:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(2.5deg);
-o-transform: rotate(2.5deg);
transform: rotateZ(2.5deg);
z-index: -1;
}
.infops:after
{
-webkit-transform: rotateZ(-2.5deg);
-o-transform: rotate(-2.5deg);
transform: rotateZ(-2.5deg);
}
.infops h1
{
font-size: 1.8em;
font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-top: 1px solid #ddd;
border-bottom: 2px solid #ddd;
}
.infops p
{
text-align: left;
margin: 1.5em 0;
}
/**xbox**/
.infoxbox, .infoxbox:before, .infoxbox:after
{
background-color: orange;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
.infoxbox
{
position: relative;
width: 50%;
padding: 2em;
margin: 50px auto;
}
.infoxbox:before, .infoxbox:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(2.5deg);
-o-transform: rotate(2.5deg);
transform: rotateZ(2.5deg);
z-index: -1;
}
.infoxbox:after
{
-webkit-transform: rotateZ(-2.5deg);
-o-transform: rotate(-2.5deg);
transform: rotateZ(-2.5deg);
}
.infoxbox h1
{
font-size: 1.8em;
font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-top: 1px solid #ddd;
border-bottom: 2px solid #ddd;
}
.infoxbox p
{
text-align: left;
margin: 1.5em 0;
}
And here is my html
<div class="infoxbox">
<h1>Xbox</h1>
</div>
<div class="info">
<h1>Playstation</h1>
</div>
What about float: left to infops div?
You can use display:inline-block to both the divs
.infoxbox{
display:inline-block
}
.info{
display:inline-block;
}
Fiddle
You can use display:inline-block. I have used inline style attribute for demo
DEMO
You just have to use float: left for one side and float:right for the other one.
Another alternative is to use tables:
<table width="100%">
<td>
<div class="infoxbox">
<h1>Xbox</h1>
</div>
</td>
<td>
<div class="infops">
<h1>Playstation</h1>
</div>
</td>
</table>
http://jsfiddle.net/c6gus/15/
is this what you want?
.infops {float:left;}
http://jsfiddle.net/c6gus/3/
.infoxbox{display: inline-block;}
.infops{display: inline-block;}
Related
I have the following Jade / HTML:
a.service.comparison(ng-href="...")
.icon
i.far.fa-map-signs
.content
span.d-block.title Compare energy deals
span.text Looking for a better energy deal?
.arrow
button.btn(type="button")
i.fas.fa-chevron-circle-right
And Less / CSS:
.service {
color: #grey-dark;
display: flex;
margin: 0 auto 15px;
max-width: 100%;
.icon {
border: 1px solid #ccc;
border-right: none;
border-radius: 2px 0 0 2px;
font-size: 28px;
padding: 10px 15px;
i {
position: relative;
top: 50%;
text-align: center;
.transform(translateY(-70%));
width: 40px;
}
}
.content {
border: 1px solid #ccc;
border-right: none;
flex-grow: 1;
padding: 15px;
.title {
color: #green-medium;
font-size: 17px;
}
}
.arrow {
min-height: 100%;
.btn {
background: #green-medium;
border-radius: 0 3px 3px 0;
color: white;
padding: 0;
width: 35px;
height: 100%;
i {
position: relative;
top: 50%;
.transform(translateY(20%));
vertical-align: top;
}
}
}
}
It looks nice on all Browsers, the left icon is in centre and the right green button has a 100% height and fill the box... Unfortunately on iOS Safari it looks differently: the left icon is on top and the right button doesn't fill the entire box height as you can see in the image below.
Does anyone know how can I fix this? Thanks!
EDIT:
Transform Mixin:
.transform(#string){
-webkit-transform: #string;
-moz-transform: #string;
-ms-transform: #string;
-o-transform: #string;
transform: #string;
}
I have the following html structure where I style my titles with an underline and a shadow.
.title {
font-size: 28px;
line-height: 1;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-decoration: underline;
text-underline-position: under;
}
<div class="container">
<div class="content">
<div class="title">MY TITLE
</div>
</div>
</div>
I tried to apply a perspective effect with the following css
.container {
-webkit-perspective: 150px;
perspective: 150px;
}
.content {
-webkit-transform: rotateX(25deg);
transform: rotateX(25deg);
}
<div class="container">
<div class="content">
<div class="title">MY TITLE
</div>
</div>
</div>
As you can see, it works fine on the text but on the underline the shadow is not displayed and the distance from the text (text-underline-position: under;) is ignored.
Is there a way to display the shadow and keep the correct distance of the underline from the text when using the perspective?
You can simulate the underline with the pseudo element before:
.title {
display: inline-block;
font-size: 28px;
line-height: 1;
letter-spacing: 0px;
position: relative;
text-shadow: 2px 2px #32c8ff;
text-decoration: none;
}
.title::before {
border-bottom: 2px solid #000;
bottom: 0;
content: "";
position: absolute;
left: 0;
right: 0;
box-shadow: 2px 2px #32c8ff;
}
See the example here
Another possibility: Fiddle
.title, .subtitle {
font-size: 28px;
line-height: 1;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-align: center;
}
.title {
border-bottom: 2px solid;
box-shadow: 2px 2px #32c8ff;
}
.container {
display: table-cell;
-webkit-transform: rotateX(45deg);
transform: rotateX(25deg);
}
.content {
-webkit-transform: rotateX(45deg);
transform: rotateX(25deg);
}
<div class="container">
<div class="content">
<div class="title">GREENPEACE</div>
<div class="subtitle">THE SURFER</div>
</div>
</div>
Check this out:
https://jsfiddle.net/zzhn5gh7/
.container {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 0 auto 60px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
.title {
width: 100%;
height: 100%;
position: absolute;
background: green;
font-size: 35px;
line-height: 1;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-decoration: underline;
text-underline-position: under;
}
#rotate-x .title {
-webkit-transform: rotateX( 45deg);
-moz-transform: rotateX( 45deg);
-o-transform: rotateX( 45deg);
transform: rotateX( 45deg);
}
<div id="rotate-x" class="container">
<div class="title">MY TITLE
</div>
The right solution for me was the following:
.title {
display: inline-block;
position: relative;
font-size: 28px;
line-height: 2.5;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-decoration: none;
}
.title::before {
border-bottom: 4px solid #ffffff;
bottom: 0;
content: "";
position: absolute;
left: 0;
right: 0;
box-shadow: 2px 2px #32c8ff;
margin: 11px 0px;
}
.subtitle {
font-size: 28px;
line-height: 0.7;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
}
I'm coding some fancy stuff for teaching myself.
I have an aslope left corner. Now, i want to add the box shadow and it showed like the following image:
This is my code snippet:
html, body {
margin: 0px;
}
.navbar {
position:relative;
content:"";
border-left: 300em solid #454545;
border-bottom: 120px solid transparent;
z-index: 2;
box-shadow: 0px 8px 23px 4px black;
}
.under-bar {
margin-top: -40px;
background: #851e39;
height: 200px;
opacity: 0.8
}
<html>
<body>
<div class="navbar">
</div>
<div class="under-bar">
</div>
</body>
</html>
Can someone help me to set a box-shadow under the header?
You can use transform: rotate(); instead of the border tricks.
body {
margin: 0;
}
.navbar {
height: 200px;
background-color: #9d4b61;
position: relative;
overflow: hidden;
}
.navbar:before {
content: "";
position: absolute;
left: 0;
top: -50px;
width: 100%;
height: 100px;
box-shadow: 0px 8px 23px 4px #000;
transform: rotate(-1deg);
background-color: #333;
}
.menu {
position: relative;
left: 20px;
top: 20px;
color: #fff;
}
<div class="navbar">
<div class="menu">menu</div>
</div>
You can use a border-radius and transform: scale:
body {
margin: 0;
background: #9d4b61;
}
.navbar {
width: 100%;
height: 50px;
background: #5c5c5c;
border-radius: 0 0 100%/22px 0;
box-shadow: 0px 8px 23px 4px rgba(0,0,0,0.8);
transform: scale(1.1,1);
}
<div class="navbar"></div>
The border-radius: 0 0 100%/22px 0 set a radius in the bottom right corner, which is 100% wide and 22px height, giving the radius a "stretched" look.
The transform: scale(1.1,1) is stretching the entire element, to hide the box-shadow in each side.
I'm trying to get this result :
And here is what I have for now (I'm only trying to get the result on the left element for the moment) :
I am trying to have this left arrow transparent but I can't find how to do that.
CSS Code :
.main_container .photo_container .mask a {
color: #FFFFFF;
font-size: 25px;
position: relative;
}
.main_container .photo_container .mask a:first-child {
border: 1px solid #FFFFFF;
padding: 5px 11px 7px;
}
.main_container .photo_container .mask a:first-child::before {
border-bottom: 7px solid transparent;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
content: "";
display: inline-block;
left: -8px;
position: absolute;
top: 20px;
}
.main_container .photo_container .mask a:first-child::after {
border-bottom: 24px solid transparent;
border-right: 25px solid #eee;
border-top: 24px solid transparent;
content: "";
display: inline-block;
left: -26px;
position: absolute;
top: -1px;
}
HTML Code :
<div class="photo_container">
<img src="images/placeholder/car1.png" class="img-responsive" alt="" />
<div class="mask">
<i class="fa fa-search"></i>
<i class="fa fa-link"></i>
</div>
</div>
Can you help me?
If you don't mind using transform this is pretty simple:
Making a pseudo element after the existing one, centering it on the correct side, and rotating it by 45 degrees.
The 70.71% figure is gotten using s = q / sqrt(2) where s is the side of a square, and q is the diagonal.
.arrow
{
border: 1px white;
border-style: solid solid solid none;
position: relative;
width: 50px;
height: 50px;
}
.arrow::after
{
content: "";
display: block;
top: 50%;
left: 0;
position: absolute;
border: 1px white;
border-style: none none solid solid;
width: 70.71%; /* the side of a square is 70.71% the length of it's diagonal */
height: 70.71%;
transform: translate(-50%, -50%) rotate(45deg);
}
Finally, we can change what borders are shown, and the absolute positioning to make the arrow appear on the desired side:
body
{
background-color: black;
padding: 50px;
}
.arrow_left,
.arrow_right
{
display: inline-block; /* just to get them next to eachother */
border: 1px white;
position: relative;
width: 50px;
height: 50px;
}
.arrow_left { border-style: solid solid solid none; }
.arrow_right { border-style: solid none solid solid; }
.arrow_left::after,
.arrow_right::after
{
content: "";
display: block;
top: 50%;
position: absolute;
border: 1px white;
width: 70.71%; /* the side of a square is 70.71% the length of it's diagonal */
height: 70.71%;
transform: translate(-50%, -50%) rotate(45deg);
}
.arrow_left::after
{
left: 0;
border-style: none none solid solid;
}
.arrow_right::after
{
left: 100%;
border-style: solid solid none none;
}
<div class="arrow_left"></div>
<div class="arrow_right"></div>
The left 'arrow' cannot be transparent, because in reality it is just a solid border applied to 1/4 of a box.
(See this article explaining how the css triangle effect is achieved.)
You will either need to use images, or tweak the graphic design.
You tried use border to achieve transparent triangle. It doesn't work. So let's think about other way to implement what we want.
I created simple demo - any triangle is made by 2 lines (simple trigonometry knowledge needed.)
http://codepen.io/anon/pen/PPbxEQ - i used some variables in css, so in that case i used stylus - more prefer read the source code, not just compiled result.
We create a pseudo element for first icon. Rotate it and evaluate new height. Than change transform-origin. Easy.
We change the angle - and recalculate the cos(angle);
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url("http://7-themes.com/data_images/out/2/6775415-beautiful-images.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 0 0;
overflow: hidden;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.Icons {
width: 50vmin;
height: 25vmin;
display: flex;
}
.Icon {
flex: 1;
border-color: currentColor;
border-style: solid;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(2vw + 2vh + 4vmin);
color: #fff;
position: relative;
}
.Icon + .Icon {
margin-left: -1px;
}
.Icon:first-of-type {
border-width: 1px 1px 1px 0;
}
.Icon:last-of-type {
border-width: 1px 0 1px 1px;
}
.Icon:first-of-type:before,
.Icon:first-of-type:after,
.Icon:last-of-type:before,
.Icon:last-of-type:after {
content: '';
position: absolute;
margin: auto;
color: inherit;
background-color: currentColor;
width: 1px;
height: calc(50% / 0.866025404); /* Our angle is 30deg, so formula is calc(50% / cos(angle)) */
}
.Icon:first-of-type:before,
.Icon:first-of-type:after {
left: 0;
}
.Icon:first-of-type:before {
top: 0;
transform: rotateZ(30deg);
transform-origin: top;
}
.Icon:first-of-type:after {
bottom: 0;
transform: rotateZ(-30deg);
transform-origin: bottom;
}
.Icon:last-of-type:before,
.Icon:last-of-type:after {
right: 0;
}
.Icon:last-of-type:before {
top: 0;
transform: rotateZ(-30deg);
transform-origin: top;
}
.Icon:last-of-type:after {
bottom: 0;
transform: rotateZ(30deg);
transform-origin: bottom;
}
<div class="Icons">
<div class="Icon">I</div>
<div class="Icon">O</div>
</div>
I'm trying to make the div for bootstrap to look like below not sure how you do it with css. The arrow and the section labeleled movies
Please view the pic at https://plus.google.com/+SamuelMuiruri/posts/fMMhNQwPbCm
First of all you have to position the title "Movies" about the description. The arrow is a only a little css magic
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="specialbox">
<img src="https://placeimg.com/320/240/tech"/>
<div class="specialbox__description">
<span class="specialbox__title">Movies</span>
<h2>Age of Ultron</h2>
<p>Tony Stark tries ti jumpstart a dormant peace-kepping program...</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.specialbox {
border: 3px solid #ccc;
}
.specialbox img {
width: 100%;
}
.specialbox__description {
position: relative; /* You need this, to position the title element absolute to the description */
padding: 20px 10px;
}
.specialbox__title {
position: absolute;
background-color: yellow;
text-transform: uppercase;
padding: 10px;
border-radius: 10px 10px 0 0;
top: -40px; /* Adjust to the height of the title container */
}
/* Magic described here */
.specialbox__title:after {
position: absolute;
display: block;
content: '';
width: 30px;
height: 30px;
border: 15px solid transparent;
left: 50%;
bottom: -30px;
margin-left: -15px;
border-top: 15px solid yellow;
}
http://jsfiddle.net/ytbtbt1d/
I think you want to create a TRIANGLE edge below the div containg the text -'MOVIES' (see screenshot below)
I have created a code for you here: JSFIDDLE
HTML:
<div>Movies</div>
CSS
div{
position: relative;
display:inline-block;
width: 140px;
padding: 10px;
background:#FFC000;
text-transform: uppercase;
font-size: 24px;
text-align: center;
}
div:after{
position: absolute;
width: 0;
height: 0;
border-bottom: 40px solid rgba(0, 0, 0, 0);
border-right: 40px solid #FFC000;
bottom: -15px;
left: 0;
right:0;
margin:auto;
content: '';
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
transform: rotate(135deg);
}