I'm trying to rotate a simple navigation, and have it positioned to the left of the container div. However, I'm not sure how the rotate is supposed to work. For some reason, the div is not overlapping its parent and is out of site.
My desired outcome looks like this, with the text aligned to the left of the container:
http://jsfiddle.net/ges7L/
.write-note-container {
position: fixed;
height: 400px;
width: 800px;
border: 2px solid #000;
top: 50%;
margin-top: -200px;
right: 0;
background-color: orange;
}
.write-note-container .nav {
background-color: blue;
height: 400px;
border: 1px solid pink;
}
.write-note-container .nav .rotate {
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
background-color: red;
width: 400px;
text-align: left;
height: 100%;
}
You will need the transform-origin property set to 0, 0
.write-note-container .nav .rotate {
/* Other properties */
background-color: red;
transform-origin: 0 0;
}
Demo
add transform origin to control the origin of the rotation.
transform-origin: 0 0;
http://jsfiddle.net/ges7L/4/
Related
This question already has answers here:
Circle with two borders
(4 answers)
Closed 7 months ago.
I want to make a 1€ coin with CSS but I have the problem that I can't give it it's characteristic shape consisting of two circles. I don't want to use multiple divs for making the two circles because I want to have it as a Button. Is there any way to put 2 different shapes in one button tag or are you forced to use divs?
Here is my failed attempt at trying to do so:
.btnCircle1 {
height: 50px;
width: 50px;
border-radius: 50%;
background: red;
z-index: 100;
}
.btnCircle2 {
height: 100px;
width: 100px;
border-radius: 50%;
background: blue;
z-index: 1;
}
<button type="button" class="btnCircle1 btnCircle2"></button>
.btnCircle {
/* here just change one value, to change the other automatically */
/* for example you can use a responsive unit (that change often) like `vw` and the other element will automatically changed automatically */
--bigCirle-Height: 100px;
height: var(--bigCirle-Height);
width: var(--bigCirle-Height);
/* is always a perfect circle */
border-radius: var(--bigCirle-Height);
border: none; /* Remove default borders */
/* add this to make the ::before works */
position: relative;
}
.btnCircle::before {
/* change this value 1 means bigger, the smaller is the number (for example 0.7) the yellow circle is smaller */
/* using css variables and calculations the money it will be always responsive to the parent height */
--smallCirle-Height: calc(var(--bigCirle-Height) * 0.7);
content: '1€';
height: var(--smallCirle-Height);
width: var(--smallCirle-Height);
border-radius: var(--smallCirle-Height);
background: yellow;
/* this two lines will center the circle */
/* inset is like writing top: 50%, left: 50% */
inset: 50%;
transform: translate(-50%, -50%);
/* center the text inside circle */
display: grid;
place-content: center;
/* positioning absolutely */
position: absolute;
}
<button type="button" class="btnCircle"></button>
as A Haworth mentioned you, one way is using the before/after pseudo elements
here's an example:
.btnCircle {
position: relative;
border: none;
padding: 45px;
border-radius: 50%;
background: red;
}
.btnCircle::after {
position: absolute;
inset: 10px;
content: '';
background: blue;
border-radius: 50%;
}
<button class="btnCircle"></button>
One you can use background and border.
/*With background and border css start*/
.btnCircle1 {
position: relative;
background: transparent;
border: none;
z-index: 99;
line-height: 50px;
text-align: center;
width: 85px;
color: white;
background-color: blue;
border: 15px solid red;
border-radius: 100%;
}
/*With background and border css end*/
/*With pesudo element css start*/
.btnCircle1-psd {
position: relative;
background: transparent;
border: none;
z-index: 99;
line-height: 50px;
text-align: center;
width: 50px;
color: white;
}
.btnCircle1-psd::before,
.btnCircle1-psd::after {
content: "";
position: absolute;
top: 0;
left: 0;
display: inline-block;
height: 50px;
width: 50px;
border-radius: 50%;
background: red;
z-index: -1;
}
.btnCircle1-psd::after {
transform: scale(0.8);
background-color: blue;
}
/*With pesudo element css end*/
/*With radial gradient background color start*/
.btnCircle1-bg {
position: relative;
background: transparent;
border: none;
z-index: 99;
line-height: 50px;
text-align: center;
height: 85px;
width: 85px;
color: white;
border-radius: 100%;
background: rgb(255, 0, 0);
background: radial-gradient(circle, rgba(255, 0, 0, 1) 50%, rgba(0, 160, 255, 1) 50%);
}
/*With radial gradient background color end*/
/*With box inset shadow color start*/
.btnCircle1-shadow {
position: relative;
background: red;
border: none;
z-index: 99;
line-height: 50px;
text-align: center;
height: 85px;
width: 85px;
color: white;
border-radius: 100%;
-webkit-box-shadow: inset 0px 0px 0px 10px blue;
box-shadow: inset 0px 0px 0px 10px blue;
}
/*With box inset shadow color end*/
<h1> With background and border</h1>
<button type="button" class="btnCircle1">1$</button>
<h1> With radial gradient background color</h1>
<button type="button" class="btnCircle1-bg">1$</button>
<h1> With box inset shadow color</h1>
<button type="button" class="btnCircle1-shadow">1$</button>
<h1>With pesudo element <strong>before</strong> and <strong>after</strong>.</h1>
<button type="button" class="btnCircle1-psd">1$</button>
I know there is variety of JS libs for custom scroll but I believe with modern browsers it's better to go with native behaviour as more consistent and predictable. I assume I will have nice scrollbars in Chrome/Edge(Blink), acceptable in FF with their own simple color/sizing customisations and I won't care about other browsers.
The only problem I'm facing now is - I want li elements to go under the scrollbar. I tried to move content under it via transform: translateX(15px) / margin-right: -15px / right: -15px / overflow: overlay and nothing helped (while overflow:overlay does the job for <body/> it doesn't help with inner containers).
Any trick to achieve desired behaviour without JS?
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar {
background-color: transparent;
transition: .3s;
}
*:hover::-webkit-scrollbar {
width: 15px !important;
}
*::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 2px solid #444;
}
ul {
margin: 0;
padding: 0;
height: 100vh;
width: 70vw;
overflow-y: scroll;
background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
}
li {
cursor: pointer;
height: 40px;
transition: background .2s;
display: block;
}
li:hover {
background: rgba(255, 255, 255, 0.4);
}
ul:after {
content: "Scroll ↧";
color: white;
letter-spacing: 10px;
position: fixed;
left: 50%;
top: 50%;
font-size: 40px;
line-height: 1;
transform: translateX(-50%) translateY(-50%);
mix-blend-mode: difference;
}
body {
background: #12c2e9;
background: #c471ed20;
background: #444;
justify-content: center;
display: flex;
padding: 0;
margin: 0;
}
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
The overflow: overlay does what you want. But take in account that this feature is not a standard. Also Edge will have another property -ms-overflow-style: -ms-autohiding-scrollbar; to hide scrollbar. Also test carefully in Firefox.
The overflow prop should be put on the body element, so scrollbar overlay on the top of ul.
body {
padding: 0;
margin: 0;
overflow: overlay;
}
ul {
margin: 0;
padding: 0;
background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
}
Working sample (tested in Chrome)
I am trying to add sides to a box div with CSS but can't seem to figure it out. This is what I have so far. Can anyone point me in the right direction? I have included below the picture I am trying to replicate. It is the middle box.
body {
background: #1b1b1b;
color: white;
}
.container {
display: table;
margin: auto;
}
.box {
width: 150px;
height: 150px;
background: #cc0000;
margin: 50px;
}
.right-skew {
position: relative;
}
.right-skew:before {
z-index: -1;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -15px;
display: block;
width: 35px;
background: grey;
-webkit-transform: skew(-10deg);
-ms-transform: skew(-10deg);
transform: skew(-10deg);
}
.right-skew:after {
z-index: -1;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -15px;
display: block;
width: 35px;
background: grey;
-webkit-transform: skew(10deg);
-ms-transform: skew(10deg);
transform: skew(10deg);
}
.skew-border {
border: 5px solid yellow;
}
<div class="container">
<div class="box right-skew"></div>
</div>
You can accomplish this with borders pretty easily.
I'd put a large border around the left and right boxes and only color and left and right borders inversely.
* {
box-sizing: border-box;
}
.boxes {
display: flex;
justify-content: center;
}
.box {
width: 30%;
height: 200px;
text-align: center;
}
.box--1,
.box--3 {
border: 20px solid white;
background-color: rgb(200, 0, 0);
}
.box--1 {
border-right-color: red;
}
.box--3 {
border-left-color: red;
}
.box--2 {
background-color: darkred;
}
<div class="boxes">
<div class="box box--1">1</div>
<div class="box box--2">2</div>
<div class="box box--3">3</div>
</div>
Here's a quick demo: https://jsfiddle.net/15k214am/3/
Some fun with transitions cause I'm bored: https://jsfiddle.net/15k214am/4/
Here's a small adjustment to allow the background color to show through: https://jsfiddle.net/15k214am/5/
On either side, you need to add a couple of pseudo elements that are rotated with perspective added to the rotation transform.
body {
background: #1b1b1b;
color: white;
}
.container {
display: table;
margin: auto;
}
.box {
width: 150px;
height: 150px;
background: #cc0000;
margin: 50px;
}
/* following lines were added/modified */
.with-depth {
position: relative;
}
.with-depth:before, .with-depth:after {
content: '';
position: absolute;
top: 0px; /* no need to change */
height: 100%; /* no need to change */
width: 25px; /* can be changed depending on the required width */
background: grey;
z-index: -1; /* not really needed but will stop it from interfering with interation */
}
.with-depth:before {
right: -25px; /* equal to -1 * width of pseudo-element */
transform-origin: left; /* don't change */
transform: perspective(10px) rotateY(10deg); /* can be changed as per need */
}
.with-depth:after {
left: -25px; /* equal to -1 * width of pseudo-element */
transform-origin: right; /* don't change */
transform: perspective(10px) rotateY(-10deg); /* can be changed as per need */
}
/* just for demo */
.box:hover{
height: 250px;
width: 250px;
}
<div class="container">
<div class="box with-depth"></div>
</div>
Using this method would:
produce a responsive output (try hovering the element in the demo) unlike the output that would be produced through the border method (was referring to adding borders with pseudo-element on the middle one and not borders on the side elements like the other answer, which is very good).
leave the portion above and below the side elements transparent just in case the need is to show the background.
let you have greater control over the angle of the depth.
make it a little more easier to add extra effects like shadows etc to the box. Refer demo below. (This point is not applicable for shape shown in question but would be useful for a generic one.)
.box {
width: 150px;
height: 150px;
background: #cc0000;
margin: auto;
box-shadow: 0px 2px 4px 2px #CCC;
}
.with-depth {
position: relative;
}
.with-depth:before,
.with-depth:after {
content: '';
position: absolute;
top: 0px;
height: 100%;
width: 25px;
background: grey;
}
.with-depth:before {
right: -25px;
transform-origin: left;
transform: perspective(10px) rotateY(10deg);
box-shadow: 4px 4px 4px 2px #CCC;
}
.with-depth:after {
left: -25px;
transform-origin: right;
transform: perspective(10px) rotateY(-10deg);
box-shadow: -4px 4px 4px 2px #CCC;
}
/* just for demo */
.box:hover {
height: 250px;
width: 250px;
}
<div class="box with-depth"></div>
I am trying to create a Facebook icon using CSS. Using some shape-making-tutorials from internet I was able to design a facebook icon as below:
The created shape is not right. I am trying to get a more polished result like:
I tried modifying the CSS but I was unable to do it properly. The HTML is used is in the following:
#fb-icon {
background: blue;
text-indent: -999em;
width: 120px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid blue;
border-bottom: 0;
}
#fb-icon::before {
content: "/20";
position: absolute;
background: blue;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 40px;
}
#fb-icon::after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #eee;
right: 5px;
}
<div id="fb-icon">
</div>
I want to know where's the problem in the Shape's CSS code. Kindly guide me.
DEMO
<p class="logo">Facebook</p>
.logo {
background: #4661b0; /* make it "Facebook blue" */
text-indent: -999em; /* Back the actual text in the paragraph tag out of the element */
width: 100px; /* Make it nice and big */
height: 110px; /* The tag is 10px larger because of how we're handling the borders below */
border-radius: 3px; /* for that oh so important modern look */
position: relative; /* so we can position our other elements absolutely */
overflow: hidden; /* so we can hide any overflow those elements will have */
border: 15px solid #4661b0; /* so we can make it look like the F is not butting up against the right side of the box */
border-bottom: 0; /* removing the border here though, because the F does touch the bottom of the box */
}
.logo:before {
content: "/20"; /* Psuedo elements need something for content, this means a blank space */
position: absolute; /* So we can position it exactly where we want it */
background: #4661b0; /* make the box the same Facebook blue */
width: 40px; /* setup the right width, which actually extends the box outside of the containing element (along with our positioning below) */
height: 90px; /* this also extends the trunk outside of the main box */
bottom: -30px; /* as mentioned above, we pull the box we're using to create the trunk of the F down to hide some of it, because it will have rounded corners on all sides */
right: -37px; /* similar to what we're doing with bottom above */
border: 20px solid white; /* make the remaining visible border white and thick enough to look right */
border-radius: 25px; /* now give the top right visible corner the necessary curve */
}
.logo:after {
content: "/20"; /* again, pseudo elements need content to be visible */
position: absolute; /* and we're going to want to position absolutely */
width: 55px; /* the desired width of the box to make the bar long enough */
top: 50px; /* set it in the proper location */
height: 20px; /* make it thick enough */
background: white; /* and the right color */
right: 5px; /* then back it up from the edge of the containing block a bit */
}
Source
try this..
change border-radius 40px; to border-radius: 25px; to before element and add this css border-bottom-left-radius: 0;.. to same element
Check out this.. Just change the some value in :after and :before. And width of the box
#fb-icon {
background: blue;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 12px solid blue;
border-bottom: 0;
}
#fb-icon::before {
content: "/20";
position: absolute;
background: blue;
width:29px;
height: 90px;
bottom: -30px;
right: -25px;
border: 20px solid #eee;
border-radius: 28px;
}
#fb-icon::after {
content: "/20";
position: absolute;
width: 56px;
top: 50px;
height: 20px;
background: #eee;
right: 5px;
}
<div id="fb-icon">
</div>
your css needs few changes , just change the width for #fb-icon, border-radius for #fb-icon::before and right for #fb-icon::after , check the changed css
#fb-icon {
background: blue;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid blue;
border-bottom: 0;
}
#fb-icon::before {
content: "/20";
position: absolute;
background: blue;
width:40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 30px;
}
#fb-icon::after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #eee;
right: 2px;
}
check out this link http://jsbin.com/weyebeg/edit?html,css,output
I'm trying to get a trapezoidal perspective shape to have the whole area be clickable. I've gotten it to work in Firefox and even IE, but Chrome isn't cooperating too well.
Here's a fiddle with the shape and a link: http://jsfiddle.net/9n9uh6f6/1/
As you can tell, the link doesn't become active until you hover over the 'area' part of the text. In other browsers, the whole height of the shape is clickable.
I read that Chrome renders a perspective image differently and perhaps that's why it's not doing what it's supposed to.
Here's my CSS:
.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}
.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}
Please have look at this code:
.prodcaptions {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
perspective: 150px;
perspective-origin: 50% 0;
}
a{
padding: 50px;
position: absolute;
border: 1px solid black;
transform: rotateX(-15deg);
}
Seems to work the way you want it. fiddle
Try this shape for link trapazoid shape - jsFiddle
Advantage - you can change skew property to change angle of shape! Easy and effective! Reverse value for reverse shape!
html
Click Here!
css
a {
display: block;
z-index: 1;
position: relative;
/* custom sizes */
width: 136px;
height: 85px;
/* demo-only decoration */
margin: 100px auto;
font: 16px/50px Arial, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: orange;
}
a:before, a:after {
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
/* demo-only decoration */
border-radius: 4px;
background-color: orange;
}
a:before {
transform: skew(-20deg);
left: 25px;
}
a:after {
transform: skew(20deg);
right: 25px;
left: auto;
}