Creating triangles - css

I'm creating a wordpress theme and both sides of the content should have diagonally border. I can solve this with pictures but this is the ugly way and the content has not the same length on every page.
In this case i think two triangles on the right and left side is the correct solution. I tried it with this tutorial, but the problem is that I have to use fixed width for the borders and the triangle should have the height of the content, dynamically adjusted.
How can I solve this, that I come up with two triangles (marked red in the sketch).

You can achieve this (albeit somewhat imprecisely) with the CSS skew transform:
Demo: http://jsfiddle.net/cUWm2/2/
<div class="shape">
A variable amount of content.
</div>
.shape {
position: relative;
}
.shape:before {
content:"";
-moz-transform: skewX(10deg);
-webkit-transform: skewX(10deg);
transform: skewX(10deg);
width: 140%;
left: -20%;
height: 100%;
background-color: #555;
position: absolute;
top: 0;
z-index: -1;
}
This achieves the requested shape with minimal markup and decent (IE9+ and all other modern) browser support. However, when scaling height up or down, eventually the triangles cease to be triangles and a fourth edge becomes visible. You have several options:
Find dimensions that work for a practical amount of content and code to that.
Dynamically alter the skew amount using JavaScript.
Blend the background of the edge shapes with the main shape.
Ignore it (depending on the layout, it doesn't necessarily look bad).
All that said (after playing with various CSS options) I'd probably consider an image-centric solution first. You can use the :before and :after pseudo-elements to create containers which resize vertically along with your main content while staying the same width. You can then use a background image to cover the desired area, or put a 100% x 100% image into the container.

I also agree with using SVGs. I find them easier to manipulate since they're scalable and cross compatible between browsers as they're images. Here's an answer I posted to a similar question, which should get you started: Make CSS3 triangle with linear gradient
From there, it will be easy to set the image heights to match the content's. Here's a jQuery example:
$(document).ready(function() {
$(".triangle").height($(".content").height());
});

I would solve this by the use of SVGs (Scaleable Vector Graphics). You create the two triangle-SVGs and then make a 3 column layout where all columns are equally heigh (for example by using display: table-cell). You chose the left triangle as background-image for the left column and the right triangle as bg-image for the right one. The middle one is for your content.
Dont forget to use preserveAspectRatio(https://developer.mozilla.org/de/docs/SVG/Attribute/preserveAspectRatio) in your SVG.

Related

How does this CSS code to center an element work?

position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
This is CSS code for centering a button in the viewport. Can somebody explain how this works? I found it somewhere online and it seems to work but I don't get the need for margin-right and transform. Naturally the code doesn't work without them but intuitively I feel the first three should be enough to center the element. I'm relatively new to CSS so I'd understand if this is considered a silly question :)
Take a look at this article: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/. Simply using the first three lines of css (position, top, and left) will center the top left corner of the object, which will make the whole object completely off-center. The negative translation moves the object up and to the right by half of its height and width, respectively, which makes the object centered. In fact, I don't think you even need the margin-right code, but I might be wrong.

Is it possible to create angle cut using pseudo element?

I've created a fiddle to better show what I'm trying to ask.
angle crop of pseudo element
Here's a image showing the desired result:
li.active::after {
content: '';
position: absolute;
background: #fff;
width: 10em;
height: 100%;
height: 20em;
top: 5%;
left: 15%;
transform: rotate(-75deg);
}
What I'm looking to do is have the li active class display a colored background with a cropped angled at the bottom.
it should adapt to the length of the link
needs to see through to the background
include the angle part within the link
be responsive
Is this possible in pure css?
The best way I have found to do this in pure CSS is using a the background-image property with a linear-gradient, going from one color to transparent.
You can use the color of the element itself as a mask, or you can use the background. The difference with be how you define the gradient angle and gradient color.
In this example, I have used your object color to get the effect:
http://jsfiddle.net/948ud6f7/
You will notice it is pretty jagged and not as crisp as if you were to use an image. I am not sure of a workaround with this yet, but different browsers render the edges differently, so this at least gives you a starting point.
Good luck!
You can do that by using one of three methods:
transform/rotate
border-width/border-color(transparent)
box-shadow

Scale and centre align <img> in hidden overflow div tag

I'm creating a new website for myself, and as a photographer/videographer, image content is the first thing I want people to see on my page.
Here is my code so far.
HTML:
<div id="slideshow_background">
<img src="IMAGEADDRESS.JPG" class="slideshow" align="middle"/>
</div>
CSS:
#slideshow_background {
width: 100%;
left: 50%;
margin-left: -50%;
overflow: hidden;
text-align: centre;
z-index: -1;
position: absolute;
margin-top: -100px;
margin-left: -50%;
max-height: 700px;
}
img.slideshow {
width: 100%;
min-width: 700px;
display: block;
text-align: center;
vertical-align: bottom;
}
What I am trying to achieve with this, is what is done here: http://www.atcofficial.com.
As you can see, the image stays centred whatever the window width is. It also scales up/down depending on how zoomed in or out you are. This site is made with Squarespace, so I'm imagining it's some form of fancy javascript/jquery or something along those lines.
With CSS, I am able to get the image to either stay centred, OR to scale up and down, but not both at the same time. That's what I'm trying to achieve here. Is there away to combine the two so that this is possible?
Try using CSS background-size:cover;. Cover shrinks and expands to fit various window sizes, without distorting the image. If the screen size ratio is different than the image, than it will crop the edges depending on how you have it positioned (top, bottom, center, right, left, center). Keeping the image in proportion is the key feature of background-size:cover;. Because its a background and not an image, you can easily place elements on top of it.
Here is a JSFiddle Example you can play with. Expand and contract the window to see the background image adjust in size. The only code your are interested in is listed below. (The rest of the CSS in the example is for styling only, and to make the div display at 100% width and height).
background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Follow Up
Yes, there are CSS3 slideshow galleries. Here is one that looks attractive, and is responsive: https://github.com/css-slider/image-slider. Here is a tutorial on creating a CSS3 slideshow from Smashing Magazine: http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/.
You probably already know the information below, but what you have to check into before investing much time in the technology (CSS3 or JavaScript), is how the gallery will display on older browsers and handheld devices, and is there an easy work-around for these devices.
One technique would be to place the gallery in a separate div that can be hidden for older browsers/devices. Then use the background-size:cover, or another technique, as a fallback. Also remember that IE10 and IE11 on a touch screen can be glitchy, and need testing as well. Without going to far beyond the scope of your original question, there are several good ways to detect devices/browsers including Modernizr, Matt Stow's Layout Engine, Categorizr.js and Internet Exlporer's Conditional Comments.
Side Note: The example website listed in the question displayed a large single image as background, and if there was a slideshow, it was not working on this end using the latest version of Firefox.

center image in responsive layout

I'm trying to set up a responsive header that takes an image and resizes it to the browser – easy enough. What I can't manage to achieve is centring the image vertically within it's container (in this case an a element)
See example:
http://jsfiddle.net/jwoodcreative/tUW3k/
I've tried a few css tricks that havent worked and some jQuery. Either type of solution would suit if anyone knows of one.
You can always use the top:50%, bottom: 50% trick like here: jsfiddle v13
.outerElement {
position: relative;
height: XXpx;
top: 50%;
}
.innerElement {
position: absolute;
bottom: 50%;
}
This works, because the height of the innerElement is not the same as the one of the outer Element, so you can center your element (if the heights were identical, you'd just position it to pos:0 again)
Like this? I've changed the image to be a background-image, which can be centered very easily in CSS. To make sure the link is shown, I have added a non-breaking space ( ). I think this is what you want, right?
You can change the appearance of the image more by looking here, at the documentation of the background property.

Full screen background image with 100% height overlay div

Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.

Resources