I am attempting to manipulate a div with css to avoid using an image to mimic the one below. So far I have it skewed, but is there any way to grab a corner and position it below the horizontal line? The shape appears to be a square with the lower left corner a tad bit skewed. I cant seem to figure out how to pull that one corner with out skewing the top corner as well.
skewed div shsape
Heres what I have so far:
.educationcontentdiv {
background-color: #f9da0b;
padding: 30px;
-webkit-transform: skewY(1deg);
-moz-transform: skewY(1deg);
-ms-transform: skewY(1deg);
-o-transform: skewY(1deg);
transform: skewY(1deg);
}
I have also tried to only skew the one side and it works well, but the corner is still on the same line as its opposing side:
margin: 0 0 0 -20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
overflow:hidden;
position:relative;
Any Help would be appreciated
This looks like what you might be looking for: Matrix transformation
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
Related
I want to show a text with vertical orientation, but, all examples I find on the internet display the text vertically, but like it was written from up to bottom
I want exactly the opposite
I combine writing-mode with text-orientation, but I can't get the result I want
Thanks in advance,
Rafael
You can try use transform and rotate
.word {
margin: 50px -30px;
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
background-color: whitesmoke;
width: 100px;
text-align: center;
}
<div class="word">hello world</div>
More about how to use this here
I did it
Just used transform
transform: rotate(-90deg)
Which is the same as rotating 270deg
My code should do the following:
A background big semi-black bar that is rotated 5 degrees.
JSFiddle
<div class="con-fluid"><div class="_978y"></div></div>
.con-fluid{
width: 100%;
}
._978y{
background-color: #2d2d2d;
width: 200%;
height: 296px;
position: absolute;
-webkit-transform: rotate(5.13deg);
-moz-transform: rotate(5.13deg);
-ms-transform: rotate(5.13deg);
-o-transform: rotate(5.13deg);
transform: rotate(5.13deg);
}
/*as you can see, the rotation code is universal to make sure it works on almost all browsers/
The issue: it's not filling on both its ends. You can see it clearly in the code preview.
what I want is basically filling this empty area so it doesn't look off the chart. Any thoughts?
Thanks in advance.
I don't quite understand your query, however, I think you are asking about the missing "triangle" on the top right of the rectangle. It is there because you rotated the rectangle.
To hide it, put margin-top: -10px; within the css for ._978y, moving the rectangle up 10px.
I'm designing a website using Dreamweaver and I'm having some problems with aligning the menu bar. I'm using an image designed in Photoshop and then exported over to dreamweaver. The image is to go in the center of the banner as it contains the links to the other pages of the website. I'm having difficulty center aligning this. It needs to be center aligned by the middle of the image, not by the left edge of the image. I have been using this code in CSS to do so:
position: fixed; (The menu bar needs to always be at the top, even when scrolling)
top: 0px;
left: 50%;
margin-right: -50%
transform: translate(-50%, 0%);
This has been working for Google Chrome, but on Safari it doesn't work. The image still aligns by the left margin of the picture.
Any help would be greatly appreciated.
I have also tried using margin-left: 50%; instead of transform and that doesn't seem to work.
Have you tried with the prefix?
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
I've rotated a simple paragraph. I'm trying to get it aligned to the to the left of the browser by 0% and the from the top of the browser 50%.
http://jsfiddle.net/tmyie/fyYS7/
p {
position: fixed;
-webkit-transform-origin: left center;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
I would do top: 50%; and left: 50%, but the rotate seems to totally skew those attributes.
I've tried reading these docs, but I'm quite confused.
transform-origin will give the point where the element is'nailed' in order to transform it.when you say left center , it nails the element in its vertical middle and at left, transform starts from there, so transform will obviously hide part of it as soon as it rotates.
What you want is to drop it from top and left. Once rotation is given, you can use translate, to slide it back in view.
http://jsfiddle.net/fyYS7/1/
p {
position: fixed;
top:0;
left:0;
transform-origin: top left;
transform: rotate(-90deg) translatex(-100%);
}
Is there a way i can draw the black "background" behind the image using pure CSS ?
I am persuaded that it can be done using the :before pseudo-class. But i can't make it work. I have also tried using shadows, but the final result is not similar what i am trying to achieve.
Scope and requirements:
Modern browsers, no javascript, no jQuery, no plugins and no extra HTML markup.
Before answering:
I know there are zillion ways to achieve what i am trying to do, however i am really looking forward for a pure CSS solution. As stated before, trying to avoid extra markup and javascript for something as simple as that. Thanks!
Here is a fiddle and the code below.
img {
position: absolute;
top: 100px;
left: 100px;
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
img:before {
background: #000;
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
transform-origin: center left;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
width: 300px;
height: 300px;
content: ".";
}
<!doctype html>
<html>
<body>
<img width="300" height="150" src="http://upload.wikimedia.org/wikipedia/en/7/70/Example.png" />
</body>
</html>
It seems like the before: element is ignored on img tags - http://jsfiddle.net/GVdYe/
Added a div (sorry :-)
The problem you're having is related to how pseudo-elements work.
Before and after elements are rendered inside their parent. So:
div:before{ content:'before'; }
div:after{ content:'after'; }
renders basically like this:
<div> <span>before</span> Hello <span>after</span> </div>
You can't put other elements in img, because img is a replaced element, and therefore can't apply pseudo-elements to it. Read the spec.
So, the easiest option would be to wrap the image in an <a> (as images sometimes are) and apply your before style to the a.
Alternatively, accept the non-rotated shadow box-shadow provides.
CSS has limitations unfortunately, so you're going to have to compromise somewhere, either in design (I would argue this is the way to go) or in markup.
<style>
html (or body) {
background: url();
}
</style>
I don't know if you just want it behind the image or the entire browser. If you want it behind the image only then you will need a wrapper or at least another <div>, <span> or <img>