I have a submit button whose text needs to be rotated. However, I can only seem to work out how to rotate the entire submit button rather than just the VALUE.
The CSS I'm using to rotate is simply:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
and the whole CSS for the submit button is:
.form input[value="SUBMIT"] {
height:1.5em;
width:7em;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
font-size:1.5em;
}
As you can guess, this applies to the entire submit button, so the whole thing is rotated (hence why I've swapped the height/width attributes to make it a thin vertical bar, see image below).
The Problem is that this makes the button position really weirdly, and I can't get it to the desired position in the div (which is directly to the right of the textarea). There is more than ample room, however adding margin-top:-XYZem only pushes the button up a little bit, and then stops.
Here's a live version so you get the idea
The button is very easy to position when I haven't done the rotation; is it possible to rotate ONLY the text value that sits on the button, and not the entire button itself?
put input in div and customize your style
.button{
/* write your style here*/
background-color: #12E9F0;
border: medium none;
margin-right: 0;
padding: 0.2em 0.6em;
}
.button input[type="submit"]{
height:1.5em;
width:7em;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
font-size:1.5em;
border:0 none;
background:none;
}
<div class="button">
<input type="submit" value="submit" />
</div>
I think this is what u need :
.form input[value="SUBMIT"] {
-moz-transform: rotate(-90deg);
font-size: 1.5em;
height: 1.5em;
position: absolute;
top: 3.5em;
width: 7em;
}
Related
This question already has answers here:
draw angular side / parallelogram using CSS
(3 answers)
Closed 6 years ago.
I am working on a project where I have to create something similar what is showing in the image below. Concretely, the yellow parallelograms with text that are showing inside the red rectangular (I dont need this red rectangular). As you know the divs by default are rectangular
So then my question is, how could create 3 parallelogram-divs or something similiar?
Any advices or guidelines would be appreciated
Thanks
PS: I cannot use a image as background because, If you do the windows smaller the backround doesn't follow the text
You can use the negative SkewX transform to get the desired effect:
div {
margin: 20px;
width: 200px;
height: 100px;
display: inline-block;
background: yellow;
border: 1px solid black;
transform: skewX(-10deg);
}
<div></div>
weinde almost has it, but 2 problems: You need to set display inline block, and the contents of the div will be skewed. A really lazy way to do this would be:
.para {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
display: inline-block;
vertical-align: top;
}
.unskew {
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
<div class="para"><div class="unskew">stuff</div></div>
<div class="para">stuff 2</div>
I feel like the unskew div is unnecessary though.
You could also try playing with css3 background gradients. Apply the gradient to a parent div sitting behind the 3 elements with text, for example. http://www.quirksmode.org/css/images/angles.html
Try this CSS style:
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;}
insted of #parallelogram you can chose your own class name...
I am using transform property of CSS3. It creates space on the left side of the div after it rotates it. Heres my JSfiddle
SO want some code:
<div>
Maglevboard
</div>
<style>
div {
font-size:5em;
transform:rotate(-90deg);
display:inline-block;
}
</style>
You can fix it by adding a translation and using a proper transform-origin. I think you want
div {
font-size: 5em;
transform-origin: 100% 0;
transform: translateX(-100%) rotate(-90deg);
display: inline-block;
}
<div>Maglevboard</div>
I am trying to accomplish the following with CSS:
I have a code pen started here
I can easily rotate the text as I would like with the following CSS:
.Rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
However, the text ends up as shown below
I understand why it's happening, but unsure how to globally solve it. It is using the bottom left corner before you rotate it. I can individually with each widget place a fixed height/width on the .title But if at all possible. I would like to avoid that.
Can anyone provide a solution that would allow the 'rotated' text to always be located at bottom:0, left:0?
You can set the origin to bottom left, and then apply a translation to the element, prior to the rotation
-webkit-transform: rotate(-90deg) translateY(100%);
-webkit-transform-origin: bottom left;
transform: rotate(-90deg) translateY(100%);
transform-origin: bottom left;
The translation makes the top left corner be where you want it, so to speak.
It's not easy to explain how it works... just try it
I personally would just make the elements a little more intricate but singular with :before & :after. Then I'd position the text within a position absolute.
.widget {
height: 50px;
width: 250px;
background: #81a6d5;
float: left;
margin-left: 10px;
color: #084ca1;
}
.widget::before {
content: "";
position: absolute;
height: 50px;
width: 35px;
background: rgba(255,255,255,.3);
}
.widget .title {
transform: rotate(-90deg);
position: absolute;
font-size: 11px;
font-family: helvetica;
margin-top: 15px;
}
I made this pen to show the idea, it would clean up the coding a little bit also.
http://codepen.io/brycesnyder/pen/PwYdJq
I wasn't able to think of a way to universally be able to do this with CSS without positioning each one individually, but with JS it was pretty easy. If you can use JS intead, this code should take care of it on its own, without changing any of your current HTML or CSS.
$(function(){
$('.rotate').each(function(){
var thisTitle = $(this);
var w = thisTitle.outerWidth();
var h = thisTitle.outerHeight();
var newLeft = Math.abs((w - h) / 2) * -1;
var newBottom = Math.abs((w - h) / 2);
thisTitle.css('left', newLeft);
thisTitle.css('bottom', newBottom);
});
});
Codepen: http://codepen.io/supah_frank/pen/yyBxzo
I want to code the below design in HTML&CSS
What I made so far is:
I made it using:
a links
SVG as background
Absolute position and translate(x,y) property in CSS.
Please check this fiddle for the live link
The issues in my design are:
Each item is actually a rectangle, if you notice the highlighted
rectangle in red, this is the area of the selection, so if you hover
over the left corner of m2, it will select m3.
I want to change
the background color of the SVG background when hover, how to
achieve that?
Is there an ideal way to make this concept better?
even if we used JS to position the elements.
Click here to view the SVG shape itself.
CSS code for the items:
.menu #m1 {
right: 100px;
transform: translate(-140px, -160px);
}
.menu #m2 {
right: 295px;
transform: translate(-25px, -80px);
}
.menu #m3 {
right: 400px;
}
.menu #m4 {
right: -60px;
transform: translate(-140px, -160px);
}
.menu #m5 {
right: 140px;
transform: translate(-20px, -80px);
}
.menu #m6 {
right: 240px;
}
.menu #m7 {
right: -95px;
transform: translate(-15px, -160px);
}
.menu #m8 {
right: 0px;
transform: translate(0, -80px);
}
Thanks,
This is how I would do it to keep the boundaries of the shapes based on Responsive grid of diamonds (no JS or svg needed):
DEMO
.wrap{
width:50%;
margin-left:13%;
transform-origin:60% 0;
transform: rotate(-45deg);
}
.wrap > a{
float:left;
width:19%;
padding-bottom:19%;
margin:0.5%;
background:teal;
}
.wrap > a:hover{
background:gold;
}
.wrap > a:nth-child(4){
clear:left;
margin-left:20.5%;
}
.wrap > a:nth-child(7){
clear:left;
margin-left:60.5%;
}
<div class="wrap">
</div>
To insert content in the shapes, you can "unrotate" it with transform: rotate(45deg)
You need to rotate the links themselves. Right now, you're not rotating anything, you're just showing images with rotated boxes. Instead, make the background image unrotated and rotate them with CSS.
For example:
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
A direct answer would be to use the poly attribute of SVG
That was you are not relying on CSS to rotate it.
The svg element once drawn is not manipulated after the css changes the appearance.
Drawing a 'diamond' shape in poly is your best option to avoid the bounding rectangle..
<svg height="250" width="500">
<polygon points="0,25, 25,0, 50,25, 25,50 " style="fill:black" />
</svg>
Basic example
JsFiddle
Update :
The code you have produced is shows it is not the SVG background you are editing..
If you want the SVG background to change you can add the attribute as i have lined up, not edited in CSS.
For my option to work on a hover event for example, you will need an id on each of the svg elements and then :hover on each of those, or javascript.. but its just an option. Other answers look to be more applicable.
My answer only facilitates the drawing onto the SVG.
Did you try css rotate to restrict the rectangle. You could use SVG anyway as the background now.
.m-item {
color: white;
text-decoration: none;
text-transform: uppercase;
border: 2px solid #000;
background-color: black;
padding: 50px;
position: absolute;
transform: rotate(45deg) translate(25px);
}
.m-item span {
position: absolute;
transform: rotate(-45deg) translate(0, -14px);
}
.m-item:hover {
background-color: #AA5;
}
<span>m1</span>
I'm trying to get these divs to overlap and have the text be inside the triangle but the text can only be moved around outside the triangle.
JSFiddle
This is the HTML+CSS:
<div class="tri">
<div class="test">
This is test
</div>
.tri {
width: 0;
height: 0;
border-top: 100px solid black;
border-left: 100px solid transparent;
position:relative;
}
.test {
display:inline-block;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
zoom:1;
margin-top:-80px;
margin-left:-80px;
color:red;
}
You can simply use position: relative; for the container element and than use position: absolute; for the child element, this way, your absolute positioned element won't flow out in the wild, and will be relative to the parent element, also it will be overlapped this way
Demo
Also it's a CSS triangle with borders and height and width set to 0 respectively, so you cannot expect an the child element to overlap the triangle
I'm not entirely sure of what you are trying to achive here.
If you want the text to be inside the black triangle, you could just edit out
display:inline-block;
Worked in JSFiddle, only tested in FireFox and Chrome though, might want to check more browsers.