I'm trying to rotate my shadow only, but I rotate my object with it. How do I only rotate the shadow
text-shadow: 20px 20px 1px red;
transform: rotate(180deg);
}
You can't rotate text-shadow directly but you can use below method to get your expected result.
Using this method now you can also apply other CSS to your text shadow text. For that you have to get same content text in title also.
.text-rotate {
position: relative;
line-height: initial;
font-size: 30px;
}
.text-rotate:after {
content: attr(title);
text-shadow: 0px 0px 1px red;
position: absolute;
transform: rotate(180deg);
color: transparent;
top: 100%;
left: 0px;
}
<div title="Test Text" class="text-rotate">Test Text</div>
Related
My designer just gave me the design with text areas with styled resize grabber. The question is: Can I style it or not ?
WebKit provides the pseudo-element ::-webkit-resizer for the resize control it automatically adds to the bottom right of textarea elements.
It can be hidden by applying display: none or -webkit-appearance: none:
::-webkit-resizer {
display: none;
}
<textarea></textarea>
This displays as follows in Chrome 26 on OS X:
Note: Adding display: none to ::-webkit-resizer doesn’t actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing, set the resize CSS property to none. This also hides the control and has the added benefit of working in all browsers that support resizing textareas.
The ::-webkit-resizer pseudo-element also allows for some basic styling. If you thought the resize control could use significantly more color you could add this:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
<textarea></textarea>
This displays as follows in Chrome 26 on OS X:
Instead of applying CSS to ::-webkit-resizer (which doesn't appear to be working in Chrome 56 or FireFox 51), you can create a "custom" handle using some markup. I found this example after a google search:
Custom CSS3 TextArea Resize Handle
Copied markup in case of future dead link:
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="drag the cyan triangle..."></textarea>
</div>
And the CSS from the example - of course, you can apply any style you like :
textarea {
position: relative;
margin: 20px 0 0 20px;
z-index: 1;
}
.wrap {
position: relative;
display: inline-block;
}
.wrap:after {
content:"";
border-top: 20px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(-45deg);
z-index: 1;
opacity: 0.5;
position: absolute;
right: -18px;
bottom: -3px;
pointer-events: none;
}
.pull-tab {
height: 0px;
width: 0px;
border-top: 20px solid cyan;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(-45deg);
position: absolute;
bottom: 0px;
right: -15px;
pointer-events: none;
z-index: 2;
}
textarea::-webkit-resizer {
border-width: 8px;
border-style: solid;
border-color: transparent orangered orangered transparent;
}
<textarea/>
Why not just show a background image?
http://jsfiddle.net/1n0d529p/
textarea {
background: url(https://image.flaticon.com/icons/svg/133/133889.svg)no-repeat rgba(71, 108, 193, 0.52) 99.9% 100%;
background-size: 12px;
}
I managed to do so this way:
.textarea-container:before {
content: '';
background-image: url(svg/textarea-resize.svg);
background-size: 16px;
background-repeat: no-repeat;
position: absolute;
width: 20px;
height: 20px;
bottom: 2px;
right: 0;
pointer-events: none;
}
Styling the resize grabber of textarea using #HorusKol's approach
Codepen url
textarea {
/* Ignore this part of code - basic textarea formatting */
margin-top: 20px;
margin-left: 20px;
width:300px;
padding:20px;
border:1px solid #CCC;
border-radius: 4px;
/* Comment below line to resize horizontal + vertical */
resize:vertical
/* Step 1 */
position: relative;
}
/* Step 2 */
.wrap {
position: relative;
display: inline-block;
}
/* Step 3 - - Sets the 1st line of resize icon */
.wrap:after {
content:"";
border-top: 2px solid #555;
width:16px;
transform: rotate(-45deg);
background:transparent;
position: absolute;
right: 1px;
bottom: 14px;
pointer-events: none;
border-radius:25%;
}
/* Step 4 - Sets the 2nd line of resize icon */
.pull-tab {
border-top: 2px solid #555;
width:10px;
transform: rotate(-45deg);
position: absolute;
bottom: 10px;
right: 1px;
pointer-events: none;
border-radius:25%;
}
/* Step 5 - Removes the default resizer grabber icon */
::-webkit-resizer{
display:none;
}
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="Customized resizer grabber...">
</textarea>
</div>
textarea {
resize: none;
}
<textarea cols="72" rows="14"></textarea>
I've the following problem: I want headlines with background and a box-shadow. Now, as firefox is not rendering transform rotate like a charm, I'm looking for an alternative.
h2 {
padding: 1rem 2rem;
display: inline-block;
color: #FFF;
background-color: #006AB3;
transform: translateZ(1px) rotate(-3deg);
transform-origin: 50% 50%;
margin-bottom: rem-calc(50px);
outline: 1px solid transparent;
z-index:1;
&:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
background: rgba(0,0,0,.3);
right:-10px;
bottom:-10px;
outline: 1px solid transparent;
z-index: -1;
}
}
https://jsfiddle.net/gw64ove4/
Why is the pseudo after Element not stacked behind the headline? Are there any other workarounds for anti aliasing when using box-shadow on a rotated element?
Thanks
Try adding a span in H2 tag:
<h2>
<span>TEXT</span>
</h2>
and CSS for span like this:
span {display: block; position: relative; z-index: 10;}
https://jsfiddle.net/zLna2xLa/
Also you can try using -moz- prefixes
EG::
-moz-transform: translateZ(1px) rotate(-3deg);
-moz-transform-origin: 50% 50%;
I have this code https://jsfiddle.net/johnsam/wpyqt71w/
.container {
border: 1px solid gray;
position: relative;
width: 50vw;
height: 50vh;
background: #fff;
}
.triangle {
border-left: 7vmax solid red;
border-bottom: 7vmax solid transparent;
}
.triangle::after {
content: 'Hello!';
color: #ffffff;
font-size: 1.5vmax;
text-transform: uppercase;
left: 0vmax;
top: 2vmax;
position: absolute;
transform: rotate(315deg);
}
and everything works good for me.
Now I need to use another word instead of "Hello!" Maybe this word is longer or shorter. How to automatically center using also the font-size variable size?
Try this:
.container {
border: 1px solid gray;
position: relative;
width: 50vw;
height: 50vh;
background: #fff;
}
.triangle {
border-left: 7vmax solid red;
border-bottom: 7vmax solid transparent;
}
.triangle::after {
content: 'hello!123';
color: #fff;
font-size: 1.5vmax;
text-transform: uppercase;
left: 2.75vmax;
top: 1.75vmax;
position: absolute;
text-align: center;
transform: translateX(-50%) rotate(315deg);
}
<div class="container">
<div class="triangle"></div>
</div>
You don't need to use a pseudo. You can get the result with the base element alone (and this way the text is in the html).
With a somewhat complex transform, you get the element to auto adapt. Notice that the red background adapts perfectly to the borders. (If you add padding to the triangle, it will also adapt)
I have also set a shadow to fill the corners. I used a distinct color so you can easily see what is the element and waht the shadow.
.container {
border: 1px solid gray;
position: relative;
width: 50vw;
height: 100px;
background: #fff;
overflow: hidden;
}
.triangle {
background-color: red;
display: inline-block;
transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg);
transform-origin: center top;
box-shadow: 0px -50px 0px 50px tomato;
}
<div class="container">
<div class="triangle">Hello</div>
</div>
<div class="container">
<div class="triangle">How are you ?</div>
</div>
I want to create an html element, e.g. a div, which is styled as follows:
semi-transparent background-color
rounded borders on all edges
left side of the div draws a straight line
right side of the div draws a skewed line
I'd like to create this in CSS only and wonder if this is possible. So far I came up with two different approaches which have their own drawbacks and are not fully sufficient. You can have a look at those in this fiddle:
https://jsfiddle.net/n4tecna3/
.one-side-skew-1,
.one-side-skew-2 {
font-size: 20px;
padding: 2%;
background-color: rgba(220, 50, 255, 0.6);
position: relative;
display: block;
border-radius: 4px;
z-index: 2;
color: #ffffff;
margin-top: 30px;
}
.one-side-skew-2 {
border-top-right-radius: 0px;
}
.one-side-skew-1:after {
height: 100%;
width: 20%;
position: absolute;
top: 0;
left: 85%;
display: inline-block;
content: "";
background-color: rgba(220, 50, 255, 0.6);
-moz-transform: skewX(-10deg);
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
-o-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
border-radius: 4px;
}
.one-side-skew-2:after {
border-top: 1em solid rgba(220, 50, 255, 0.6);
border-left: 0.25em solid rgba(220, 50, 255, 0.6);
border-right: 0.25em solid transparent;
border-bottom: 1em solid transparent;
border-top-right-radius: 4px;
left: 100%;
display: inline-block;
position: absolute;
content: "";
top: 0;
}
.container {
width: 500px;
}
<div class="container">
<div class="one-side-skew-1">
<span class="inner-text">One Side Skew With Pseudo Element Skewed</span>
</div>
<div class="one-side-skew-2">
<span class="inner-text">One Side Skew With Pseudo Element Border</span>
</div>
</div>
Approach 1 .one-side-skew-1 uses a div element with round borders and a skewed, round-bordered pseudo element to create a one-side skewed element in sum. This works great as long as the background-color is solid. For semi-transparent backgrounds you will see an ugly color overlap where the element and its pseudo-element meet.
Approach 2 .one-side-skew2 uses a div element with a pseudo behind it that consists of borders only. It's somewhat hacky but gets close to my desired result. Still, the right does not look nearly as smooth as in the first approach.
Does someone else have a good solution for this problem in CSS only? Or will I have to use a fallback solution with a semi-transparent background-image to solve this?
You can use a pseudo element for all the background and hide the overflowing parts with the overflow property on the element.
This will prevent element and pseudo element background overlapping and allow semi transparent backgrounds:
div {
position: relative;
width: 250px;
font-size: 20px;
border-radius: 4px;
overflow: hidden;
color: #fff;
padding: 1% 2%;
}
div:before {
content: '';
position: absolute;
top: 0; right: 0;
width: 100%; height: 100%;
background: rgba(220, 50, 255, 0.6);
-webkit-transform-origin:100% 0;
-ms-transform-origin:100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
border-radius: 4px 4px 6px;
z-index: -1;
}
/** FOR THE DEMO **/body {background: url('http://lorempixel.com/output/people-q-g-640-480-3.jpg');background-size: cover;}
<div>content</div>
My designer just gave me the design with text areas with styled resize grabber. The question is: Can I style it or not ?
WebKit provides the pseudo-element ::-webkit-resizer for the resize control it automatically adds to the bottom right of textarea elements.
It can be hidden by applying display: none or -webkit-appearance: none:
::-webkit-resizer {
display: none;
}
<textarea></textarea>
This displays as follows in Chrome 26 on OS X:
Note: Adding display: none to ::-webkit-resizer doesn’t actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing, set the resize CSS property to none. This also hides the control and has the added benefit of working in all browsers that support resizing textareas.
The ::-webkit-resizer pseudo-element also allows for some basic styling. If you thought the resize control could use significantly more color you could add this:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
<textarea></textarea>
This displays as follows in Chrome 26 on OS X:
Instead of applying CSS to ::-webkit-resizer (which doesn't appear to be working in Chrome 56 or FireFox 51), you can create a "custom" handle using some markup. I found this example after a google search:
Custom CSS3 TextArea Resize Handle
Copied markup in case of future dead link:
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="drag the cyan triangle..."></textarea>
</div>
And the CSS from the example - of course, you can apply any style you like :
textarea {
position: relative;
margin: 20px 0 0 20px;
z-index: 1;
}
.wrap {
position: relative;
display: inline-block;
}
.wrap:after {
content:"";
border-top: 20px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(-45deg);
z-index: 1;
opacity: 0.5;
position: absolute;
right: -18px;
bottom: -3px;
pointer-events: none;
}
.pull-tab {
height: 0px;
width: 0px;
border-top: 20px solid cyan;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(-45deg);
position: absolute;
bottom: 0px;
right: -15px;
pointer-events: none;
z-index: 2;
}
textarea::-webkit-resizer {
border-width: 8px;
border-style: solid;
border-color: transparent orangered orangered transparent;
}
<textarea/>
Why not just show a background image?
http://jsfiddle.net/1n0d529p/
textarea {
background: url(https://image.flaticon.com/icons/svg/133/133889.svg)no-repeat rgba(71, 108, 193, 0.52) 99.9% 100%;
background-size: 12px;
}
I managed to do so this way:
.textarea-container:before {
content: '';
background-image: url(svg/textarea-resize.svg);
background-size: 16px;
background-repeat: no-repeat;
position: absolute;
width: 20px;
height: 20px;
bottom: 2px;
right: 0;
pointer-events: none;
}
Styling the resize grabber of textarea using #HorusKol's approach
Codepen url
textarea {
/* Ignore this part of code - basic textarea formatting */
margin-top: 20px;
margin-left: 20px;
width:300px;
padding:20px;
border:1px solid #CCC;
border-radius: 4px;
/* Comment below line to resize horizontal + vertical */
resize:vertical
/* Step 1 */
position: relative;
}
/* Step 2 */
.wrap {
position: relative;
display: inline-block;
}
/* Step 3 - - Sets the 1st line of resize icon */
.wrap:after {
content:"";
border-top: 2px solid #555;
width:16px;
transform: rotate(-45deg);
background:transparent;
position: absolute;
right: 1px;
bottom: 14px;
pointer-events: none;
border-radius:25%;
}
/* Step 4 - Sets the 2nd line of resize icon */
.pull-tab {
border-top: 2px solid #555;
width:10px;
transform: rotate(-45deg);
position: absolute;
bottom: 10px;
right: 1px;
pointer-events: none;
border-radius:25%;
}
/* Step 5 - Removes the default resizer grabber icon */
::-webkit-resizer{
display:none;
}
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="Customized resizer grabber...">
</textarea>
</div>
textarea {
resize: none;
}
<textarea cols="72" rows="14"></textarea>