This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 5 years ago.
I've tried quite a few variants with no luck. What am I missing?
#menu {
position: absolute;
width: 50px;
height: 250px;
top: 15px;
left: 0;
background-color: #ee2e24;
color: white;
}
#menu span {
transform: rotate(90deg);
transform-origin: left top 0;
}
<div id="menu"><span>MAIN MENU</span></div>
You need to add display:inline-block; to the span
#menu {
position: absolute;
width: 50px;
height: 250px;
top: 15px;
left: 0;
background-color: #ee2e24;
color: white;
}
span {
display: inline-block;
transform: rotate(90deg);
/*transform-origin: left top 0;*/
margin-top: 10px;
}
<div id="menu"><span>MAIN MENU</span></div>
Try text-orientation.
#menu {
position: absolute;
width: 50px;
height: 250px;
top: 15px;
left: 0;
background-color: #ee2e24;
color: white;
}
#menu span {
writing-mode: vertical-rl;
text-orientation: sideways;
}
<div id="menu"><span>MAIN MENU</span></div>
You cannot use LESS or SCSS in the SA snippets. Just pure CSS, so move span out of #menu
span is an inline element. You cannot transform inline elements. Make span a block element with display: block
#menu {
position: absolute;
width: 50px;
height: 250px;
top: 15px;
left: 0;
background-color: #ee2e24;
color: white;
}
#menu span {
transform: rotate(-90deg) translateX(-100%);
transform-origin: 0% 0%;
display: block;
}
<div id="menu"><span>MAIN MENU</span></div>
Related
I am new to coding, I have tried various solutions from similar questions asked, but nothing seems to work.
I have the following problem:
I made a breadcrumb, including various divs with :before and :after elements - shaping them like connected arrows.
The problem is, I made an animation for the breadcrumb element to fade-in-down. However, no matter in what combination I tried -> The :after element does not animate properly, or at all.
It kinda just pops up after :before and the parent div .breadcrumb have finished sliding in. Can anybody help me here, or has anyone maybe have aa clue?
... I have tried animating the :after element separatly, with transition, with animation-delay etc...nothing seems to work...everything slides in fine from top, excep the :after element, which just pops up ugly after the animation from my ".breadcrumb" is finished.
<div class="breadcrumb_wrapper">
Lasermaschinen
Serien
Unterserien
Produkt
.breadcrumb_wrapper {
position: fixed;
display: flex;
align-items: center;
width: 100%;
height: auto;
margin-top: 120px;
text-align: center;
}
.breadcrumb_element {
padding: 0 2rem 0 2rem;
width: auto;
line-height: 32px;
min-height: 32px;
max-height: 32px;
background: var(--Breadcrumb-gradient);
position: relative;
text-align: center;
margin-left: 0.5rem;
color: var(--nav-text-color-and-general-background);
cursor: pointer;
text-decoration: none;
animation: fade-in-down 0.5s ease-in-out;
}
.breadcrumb_element:before {
content: "";
position: absolute;
top: 4.69px;
left: -11.32px;
width: 22.427px;
height: 22.427px;
background: var(--nav-text-color-and-general-background);
transform: rotate(45deg);
z-index: 1;
border-top: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
border-top-right-radius: 5px;
}
.breadcrumb_element:after {
content: "";
position: absolute;
top: 4.69px;
right: -11.6px;
width: 22.427px;
height: 22.427px;
background: var(--Breadcrumb-arrow-gradient);
transform: rotate(45deg);
z-index: 2;
border-top-right-radius: 5px;
animation: fade-in-down 0.5s ease-in-out;
}
#keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
Without seeing your HTML code I just had to take a guess at how you need this but here is an example with the after pseudo element coming in from the top and sitting on top of the before pseudo. Hope this helps you get what you are looking for. You can have it come in from any direction that you want.
ul {
list-style: none;
display: flex;
overflow: hidden;
}
li {
margin-left: 20px;
margin-right: 20px;
position: relative;
}
li::before {
content: '';
width: 20px;
height: 20px;
background-color: green;
position: absolute;
right: -25px;
}
li::after {
content: '';
width: 20px;
height: 20px;
background-color: red;
position: absolute;
right: -25px;
top: -100px;
transition: all 1s;
}
li:hover:after {
top: 0;
}
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
I am trying to write code that mimics this animation as much as possible.
I have been going over keyframe animations & I think that they can be used to do what I need them to do.
I effectively want to have three things happen when the user hovers over the parent element. The first is the color
on the right side of the element will change dynamically (as in the picture & as in the example code), the
icon will animate into the picture & then the text will then animate.
I am new to programming & I am looking for some direction.
Example of finished product: https://imgur.com/a/bxV1V1B
DEMO
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
}
a:hover:after {
width: 15%;
}
<div class="wrapper">
<span>Hover Me!</span>
</div>
Here you go. I made a CSS animation for you which will rotate and translate a new i that I have added into the HTML. I used font awesome for the check with the circle around it. Take a look:
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
visibility: hidden;
}
a:hover:after {
width: 15%;
visibility: visible;
}
#check {
right: 2px;
top: 8px;
position: absolute;
display: none;
z-index: 3;
transition: right .35s;
}
a:hover #check {
animation:spin .35s linear;
display: block;
}
#keyframes spin {
0% {
transform: translate(25px) rotate(0deg);
}
100% {
transform: translate(0px) rotate(360deg);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<span>Hover Me!</span><i id="check"style="font-size:22px; color:lightgrey" class="fa fa-check-circle"></i>
</div>
I'm trying to redo a client site that's currently not responsive and throughout the site she has long images that are trapezoids with text inside. Of course, on devices, you can barely read it.
So I'm trying to turn it into CSS using shapes. Tried a bunch of examples but nothing working at the moment. I think the difference is the examples seem to use hard width numbers instead of 100% for fluid width. I have a pen here: https://codepen.io/anon/pen/KmgoqE and here's the code I'm playing with as I post this (still playing, of course):
h2.test-text {
background: #000;
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -4%;
bottom: -11%;
left: -3%;
right: -3%;
z-index: -1;
-webkit-transform: perspective(50em) rotateX(-30deg);
transform: perspective(50em) rotateX(-30deg)
}
You have already good answers
To give another try. I have opted to fix your current attempt.
Basically the problem is that the background should be on the pseudo instead of on the base
h2.test-text {
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -0px;
bottom: -50%;
left: 0px;
right: 0px;
z-index: -1;
background: #000;
transform: perspective(20em) rotateX(-45deg);
transform-origin: top;
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
And now a fancy efect
h2.test-text {
color: #FFF;
padding: 5px;
font-size: 30px;
line-height: 1;
width: 100%;
text-align: center;
position: relative;
perspective: 20em;
animation: tilt 2s infinite alternate linear;
}
h2.test-text:before {
content: "";
position: absolute;
border: none;
top: -0px;
bottom: -50%;
left: 0px;
right: 0px;
z-index: -1;
background: #000;
transform: rotateX(-45deg);
transform-origin: top;
}
#keyframes tilt {
from {perspective-origin: left}
to {perspective-origin: right}
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
By using pseudo elements, and skew them, you can achieve that.
This one works if the line breaks up to 3 lines, and if you need more, a media query will fix that.
h2.test-text {
background: #000;
color: #FFF;
padding: 5px;
font-size: 30px;
width: calc(100% - 120px);
margin: 0 auto;
text-align: center;
position: relative;
}
h2.test-text:before,
h2.test-text:after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 70px;
background: inherit;
z-index: -1;
}
h2.test-text:before {
left: -35px;
transform: skewX(30deg)
}
h2.test-text:after {
right: -35px;
transform: skewX(-30deg)
}
h2.test-text.nr2 {
margin-top: 20px;
width: calc(60% - 100px);
}
<h2 class="test-text">Check out what our Clients are Saying</h2>
<h2 class="test-text nr2">Check out what our Clients are Saying</h2>
You can achieve this effect by using the the common transparent border trick to achieve css triangles. Just instead of even borders and only one set to non-transparent you use different border sizes and two colors. I colored the right edge differently so it's easier to see what's going on.
h2.test-text {
background: #bada55;
color: #FFF;
font-size: 30px;
padding: 5px;
line-height: 1;
width: 80%;
text-align: center;
position: relative;
margin:40px;
}
h2.test-text:before, h2.test-text:after {
content:"";position:absolute;top:0;width:0;height:0;
border-style:solid;
border-width:20px 15px;
}
h2.test-text:before{
left: -30px;
border-color: #bada55 #bada55 transparent transparent;
}
h2.test-text:after {
right: -30px;
border-color:blue transparent transparent red;
}
<h2 class="test-text">Whatever somebody says…</h2>
I am currently testing some CSS in different web browsers. This all works great except in Safari 5.1.7. I am testing this fiddle . Does anyone know how I can fix this, because I would like to use it in a website.
The css is supposed to display a heading with a colored line either side.
Here is the code:
[HTML]
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>
[CSS]
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
Better use one element inside h1 and use :before and :after with left and right properties. This will work in most of the browsers including Safari.
h1 {
overflow: hidden;
font-size: 30px;
text-align: center;
}
h1 span {
display: inline-block;
vertical-align: top;
position: relative;
padding: 0 5px;
}
h1 span:before, h1 span:after {
background-color: red;
position: absolute;
margin-top: -1px;
width: 9999px;
top: 50%;
height: 1px;
content: '\a0';
left: 100%;
}
h1 span:before {
left: auto;
right: 100%;
}
.color {
background-color: #ccc;
}
<h1><span>This is my Title</span></h1>
<h1><span>Another Similar Title</span></h1>
<div class="color">
<h1><span>Just Title</span></h1>
</div>
I am creating a responsive website. I want to create below shape in CSS3. using ul li.
you could use a pseudo element, and have overflow:hidden set on the parent container.
html {
margin: 0;
padding: 0;
background: #222;
}
.wrap {
position: relative;
width: 100%;
height: 200px;
background: #222;
overflow: hidden;
}
.wrap div {
display: inline-block;
position: relative;
height: 100%;
width: 22%;
margin-left: 2%;
background: lightblue;
transition: all 0.6s;
line-height:200px;
text-align:center;
}
.wrap:before {
content: "";
position: absolute;
bottom: -25%;
left: 0;
height: 50%;
width: 100%;
border-radius: 50%;
background: #222;
z-index: 8;
}
div.withImage {
background: url(http://placekitten.com/g/300/300);
background-size: 100% 100%;
}
.wrap div:hover:before {
opacity: 1;
}
.wrap div:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: blue;
opacity: 0;
transition: all 0.6s;
}
<div class="wrap">
<div>ONE</div>
<div>TWO</div>
<div>THREE</div>
<div class="withImage">FOUR</div>
</div>
NOTE
This has been done using Divs. I have left it as an exercise for the OP to alter this code for ul li.
This can also be altered to include Dynamically added elements: JSFIDDLE