I'm creating a small website and i wanted to experiment with the modern non rectangular image approach on hero images, but i'm not sure how to go about it.Here is an example of what i'm trying to achieve.Any guidance would be highly appreciated.
I am not sure why you've received so many down votes, but I know the solution to this. To achieve something like that type of design, you'll need to utilize an SVG. A Scale-able Vector Graphic(SVG) is an element in HTML used to draw a complex path, however many people utilize online tools pr programs like GIMP, Adobe Illustrator, or Inkscape to make them. You draw them in a program and export the path data to your HTML Document. I hope this helps you and your growing site.
https://inkscape.org/ -- Inkscape
https://www.gimp.org/ -- GIMP
Use a png mask image on the picture.
https://i.stack.imgur.com/ReAR9.png
.wrap {position:relative;width:969px;height:300}
.wrap .bg {height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover}
.wrap .mask {position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0}
<div style="width:969px;margin:0 auto">
<div class="wrap">
<div class="bg"></div>
<div class="mask"></div>
</div>
<div>
Content
</div>
</div>
A great way to do that is with an SVG Clipping Path. This website here allows you to create the path you want and then it will automatically generate the CSS you need to create it.
https://bennettfeely.com/clippy/
Related
im really new to this but heres my problem. I need to upload a pic onto my website (im using aptana studios 3). So i save my image as jpeg and use the code:
now it acknowledges that I am uploading the picture but it won't load. Do i have to convert the image or save it a certain way?
Oh buddy, make sure to post the code you're having issues with. In any case, it doesn't really matter what file extension you use (though .png may be the best for web). I'm assuming this is hard-coded HTML, if that is the case, I would use a simple <img /> element to display a picture. Make sure the image is saved in a nearby directory.
<div>
<div class="item"><img src="./example.png"/></div>
</div>
In the example above, example.png is located in the same folder as my index.html file. We use the attribute src, not href. An href attribute dictates what page is to be loaded when an element, e.g. an <a> element, is clicked on. If you have a CSS stylesheet, it might be preferable to load the image as a background-image to a <div> element, so that it would be easier to manipulate image properties like height and width. An example of that would be:
<div>
<div class="item"/></div>
</div>
..and the CSS:
.item {
background-image: url("boxes.png");
width: 800px;
height: 600px;
background-size: contain;
}
Here, I set the image's height and width, and tell my styles that I want the whole image to be show with background-size: contain;.
I hope this helps.
I want to ask a few questions regarding advanced HTML formatting of my homepage in this case.
Some background to my problem:
I am using a content management system called "Joomla!" to manage my site.
Here is a link to my site under construction... Smart-Drones.
At this point I have designed exactly how I want the website to look by basically "drawing it" using paint.net. I have all of the graphics on different layers so that I can save them and insert them into the web page as PNGs.
Basically this is how I want my website landing page to look:
(since I can post pictures with my "reputation of <10" please refere here: http://forum.joomla.org/viewtopic.php?f=706&t=858845)
The way the Joomla! Content Management System works is by splitting the website into modules which are in specific positions.
Inside each "position" is a space that can be formatted using HTML and my home page is one big HTML module so it's basically a bog standard HTML page.
You can see from the images attached that the landing page requires a large background image (which provides framing for the page). The background image is a PNG and has the Fibonacci patterns as well as a large picture in the center of the page.
I want to overlay more elements, such as images, buttons and text over that background image. I also want to be able to precisely position the HTML elements.
The image below should give an idea of how I need to position the elements:
I have been trying to formulate the page using a WYSIWYG editor called JCE (Joomla Content Editor) but have been having no luck. It just refuses to work and is so fickle to work with!
I tried to insert a div and then add the background image and to position the elements over that image using 'absolute positioning' but the farthest that I have managed to get is what you can see on the home page, a mess:
The WYSIWYG editor has generated this code:
<div style="background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png'); background-repeat: no-repeat; background-position: center center; width: 799px; height: 906px; position: relative;"> <img style="position: absolute;" src="images/logo/Smart-Drone-4-logo.png" alt="Smart-Drone-4-logo" /><span class="h3" style="position: absolute;"><span class="h4" style="color: #ffffff; position: absolute;">INTRODUCING THE ALL <span style="color: #ffcc00;">NEW</span></span><span style="color: #ffab00;"><span class="h4"></span> </span> </span>
</div>
Not pretty, so I ask the community...
...How do you normally go about this process? It should be fairly standard procedure but my searches have turned up no practical advice.
Any advice or links to tutorials that may be of help will be greatly appreciated.
Best regards,
Jethro.
http://forum.joomla.org/viewtopic.php?f=706&t=858845
Emmanuel is basically right about the site layout edit abilities of tinyMCE. But Joomla's tinyMCE integrates buttons for formatting. That means you can add your own formats via a file called "editor.css" which is placed in your template /css folder. All defined classes in there are integrated into tinyMCE. So if you want to set background images via tinyMCE your best bet is to create or edit the editor.css and add something like the following.
editor.css example:
.my-background {
background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png');
background-repeat: no-repeat;
background-position: center center;
width: 799px;
height: 906px;
position: relative;
}
I have an image, on which I want to place links, which could be either text or an image. Pretty much what Wikipedia has here for example (the map of Germany and its states): http://en.wikipedia.org/wiki/States_of_Germany
Back in the 90s I would've used the map tag to create clickable parts on the image.
I've looked at the source code of the map on Wikipedia and noticed that all the states of an absolute position. So is there an easy way to implement such a thing? Or do I have to use, for example, Photoshop to check for the absolute position and hardcode it in CSS/HTML?
As you already noticed, Wikipedia uses <div>-elements which are positioned over the image. One way or another you would need to provide the (absolute) coordinates for the texts you want to place on top of the image.
You can try to fiddle around to get the correct coordinates or use a(ny) image editing application to exactly find the required coordinates within the image.
Wikipedia uses some structure like this
HTML:
<div class="container">
<img src="myImage.png" />
<div class="text1">Text1</div>
<div class="text2">Text2</div>
</div>
CSS:
.text1 {
position:absolute;
left:50px;
top:100px
}
.text2 {
position:absolute;
left:200px;
top:50px
}
(Except that they directly put the CSS styles in the HTML elements...)
See this jsFiddle for an working example.
I guess you need a HTML map (example http://www.w3schools.com/tags/tag_map.asp) plus some javascript to include the text over it.
Please take a look to the following question, it might help you:
HTML, jQuery : Show text over area of image-map
If you are creating something similar in the link you mentioned, you gotta be pin pointing those positions. Isn't it? absolute positioning is good to go in that case.
But if your scenario does not require you to put those links in the exact locations on the image, you can try something like this.
CSS//////////
div.back{
background:url('path/to/your/image.extension');
width:/*width of the image*/;
height:/*height of the image*/
}
This div with class back will just work like the way you want. Then put the links inside the div and the links will be displayed on top of that image.
Check out this fiddle.
I'm trying to make a Pinterest-like gallery for my portfolio. Nothing too fancy, just displaying images that are found in a folder by some simple PHP. I will attach a lightbox (or something like it) later.
For now, I have trouble with letting the images "float" upwards against the other pictures. In some magical way, the two images in the top right do it, but the other ones do not.
You can see it live here.
Here is a JSFiddle, but it doesn't show the images.
Is there some easy way to do it? Or do I really need to start using some kind of jQuery-plugin for this?
Thanks!
http://masonry.desandro.com/
Masonry is a good grid arranging JQuery plugin. Probably one the best out there.
I personally have not used it however friends of mine have with good results saying that:
It is customisable
It is quite lightweight for what it does
It is fast
Unfortunately it is not exactly the fastest thing in the known universe since it uses JQuery (which is already a relatively slow Library, or framework as its starting to get) and puts a CPU intensive calculation on top. As such it is not as fast as a CSS hack but whether Masonry is the best choice or not depends on exactly what you need it for which has been left out in this question.
If you are building a simple portfolio type thing then a CSS hack is the best method but if your building something further then this might be the one your looking for.
Unfortunately due to patchy standards across browsers like IE you will find producing this layout without considerable resources placed client side (such as image resizing for very large images that could have been cropped server side) difficult.
o.v. and ThinkingStiff do have answers and if you were to standard resize every image that comes into your site to a particular size and use caching method available for the layout you could easily get away with a CSS hack for something simple like a photo page or a portfolio.
You can do this with CSS3 column-count, assuming you at least have a single containing element. This method has the advantage of changing layout easily (for a mobile device, for example) by simply adding a class.
Output:
Demo: http://jsfiddle.net/ThinkingStiff/rS95S/
CSS:
#container {
column-count: 3;
column-fill: balance;
column-gap: 10px;
width: 330px;
}
.image {
display: block;
margin-bottom: 10px;
width: 100px;
}
HTML:
<div id="container">
<img class="image" src="http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg" />
<img class="image" src="http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg" />
<img class="image" src="http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg" />
<img class="image" src="http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg" />
<img class="image" src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1" />
<img class="image" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1" />
</div>
jQuery Masonry from Sammaye's answer would work - the trick is getting it to work before the content has been appended to DOM in the original order (this would be fairly trivial on an ajax website)
There is however one reason why Masonry plugin would be overkill - it's the variable content width. Neither on pinterest nor in the portfolio mockup would this be needed - at the same time you end up with processing overhead on the client-side, and flash of incorrectly positioned content.
Just using container <div> columns would be sufficient in this scenario:
.column {width:33.3%;float:left;/*should be clearfix instead*/}
.column .content {width:95%;margin:2.5%;float:left;}
Content can then be applied to correct columns either server-side (getting image height&width is trivial, just balance how dynamic it has to be) or on the client-side w/ajax before appending content
Fiddled
I would like to create an indeterminate HTML+CSS progress bar so it looks like the one on Vista:
(source: microsoft.com)
I would like to:
horizontally adjust it to progress bar width (minimum and maximum width may be defined)
don't use Javascript but rather just animated GIF
having only one moving indicator on the whole width
Any suggestions how to do this?
NO, NO, NO! It is possible
Using CSS overflow: hidden and keyframe, it can be possible.
For the keyframe, I used from left:-120px(width of the glowing object) to left:100%
The structure I used:
<div class="loader">
<div class="loader-bg left"></div>
<div class="loader-bg right"></div>
<div class="greenlight"></div>
<div class="gloss"></div>
<div class="glow"></div>
</div>
The updated, compact structure using :before and :after:
<div class="loader7">
<span></span>
<div class="greenlight"></div>
</div>
The gradient, masking, glowing and all the effects cost an expensive structure. If anyone has a better idea, please let me know.
At this date, webkit only solution(the ellipse mask for the glow):
Added SVG mask for Firefox and other browsers that do not support -webkit-mask-image: http://jsfiddle.net/danvim/8M24k/
css - width:100%
no Javascript means you will have to do it with html5 which is a bit trickier. An animated GIF would work only if you decide to make the bar fixed-width (otherwise the gif will be skewed)
to move it: javascript or html5
The easiest way: javascript (like it or not... ;) )
GIF-only solution
Vista's indeterminate progress bar doesn't loop right after it goes off on the right...
So I could create a wide enough GIF image and when progress bar would be narrow it would take longer for it to loop and when it'd be wider it loops again sonner. :)
Time of each repeat is the same in both cases but in narrow bar it takes less to get to the end than on the wider ones.