It's possible to rotate only content?
div:after {
content: "10";
background-color: fuchsia;
display: inline-block;
transform: rotate(30deg);
font-size: 30px;
}
Example image:
Nope, it's not possible. But you can utilize both :before and :after to achieve that:
div {
position: relative;
}
div:after{
content: "10";
display: inline-block;
transform: rotate(30deg);
font-size: 30px;
position: absolute;
left: 10;
}
div:before{
content: "";
background-color: fuchsia;
display: inline-block;
height: 35px;
width: 35px;
position: absolute;
left: 10;
}
<div></div>
Related
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 have the following html:
<div class="container">
<span class="word-container" >
<span tooltip-def="To sign or give formal approval to.">
<span class="define-word highlight-word">ratifying</span>
</span>
</span>
</div>
CSS:
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 50%;
position: absolute;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The tooltip is cut off on the left side. I tried overflow: visible and higher z-index on .word-container [tooltip-def]:after, but none of the working.
Here is the jsfiddle demo: https://jsfiddle.net/mddc/5dtwr6zc/10/
How can I make minimal CSS changes to make the tooltip visible? Move to the right side when the left side touches the browser edge?
you are going great you only need to change the css. below is the css code apply and check.
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 10%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 20%;
position: relative;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
I've made the changes which can be viewed in the fiddle below
https://jsfiddle.net/5dtwr6zc/14/
.test{
overflow: visible;
}
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 150%;
position: absolute;
transform: translateX(-47%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The problem was the positioning of the after psuedo element. But I would strongly suggest to make the positioning dynamic as per the context using JavaScript
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>
I'm trying to cross vertically the rotated square with a line created using pseudo-element.
.marker{
display: block;
width: 16px;
height: 16px;
border: solid 2px #896f56;
transform: rotate(45deg);
}
.marker:before{
content: "";
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
transform:rotate(-45deg);
margin-left: 19px;
}
https://jsfiddle.net/npvfu3ff/
But the rotate rule is affecting the pseudo element making it difficult to position.
Here is an image of what I need:
Changed the way to do it, so that it will center automatically
.marker{
display: block;
width: 16px;
height: 16px;
border: solid 2px #896f56;
transform: rotate(45deg);
margin-top: 30px;
}
.marker:before{
content: "";
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
margin: auto;
margin-top: 50%;
transform:rotate(-45deg) translatey(-50%);
transform-origin: top center;
}
<div class="marker"></div>
I detached marker line from rotation by using :before and :after for square and line, so they don't affect each other.
https://jsfiddle.net/wmqhd72u/
.maker2 {
position: relative;
}
.maker2:hover:before {
transform: rotate(405deg);
}
.maker2:before,
.maker2:after {
position: absolute;
}
.maker2:before {
display: block;
content: "";
width: 16px;
height: 16px;
border: solid 2px #896f56;
top: 0;
left: 0;
transform: rotate(45deg);
transition: all 2s;
}
.maker2:after {
content: "";
position: relative;
top: -8px;
left: -8px;
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
margin-left: 19px;
top: 8px;
left: -10px;
}
I'm using a pseudo-element of content to make a triangle that I want floating outside the upper
Setup of problem: Get the blue triangle on this fiddle to be wider (but keep its height)
.bluebox { margin-top: 50px; background: blue; min-width: 300px; min-height: 200px; position: relative;}
.bluebox:after { content: "\25B2"; color: blue; position: absolute; font-size: 2em; top: -0.8em; left: 5%;}
What attribute to I need to tweak in order to do that?
If supporting IE8 and below is not a concern, you could apply scaleX() transform function with to the pseudo-element.
For instance (Vendor prefixes omitted due to brevity):
.bluebox:after {
/* other declarations... */
content: "\25B2";
transform: scaleX(1.5);
}
Online Example:
.bluebox {
margin-top: 50px;
background: blue;
min-width: 300px;
min-height: 200px;
position: relative;
}
.bluebox:after {
content: "\25B2";
color: blue;
position: absolute;
font-size: 2em;
top: -0.8em; left: 5%;
-webkit-transform: scaleX(1.5);
-moz-transform: scaleX(1.5);
-ms-transform: scaleX(1.5);
-o-transform: scaleX(1.5);
transform: scaleX(1.5);
}
<div class="bluebox"></div>