Is there any jQuery or other plugin which let me display my thumbnails like that:
http://hellocute.tumblr.com/archive
I know, example is cool :). Anyway this is cool brick style which displays images not in columns, which would be easy to do, it displays them in rows, so next row is starting in the highest available position, not in the first column for example.. That's pretty cool. Also works for any window size which is double cool.
Anyone know how to do this ? I checked their code but it's difficult to find the answer there.
Was trying to google: css brick style, thumnails brick display, js brick photos
Nothing interested found.
THX
jQuery Masonry is probably what you are looking for.
Related
I would like to design some sort of a map, of a country, in which every state behaves as a different 'div'. Then I would link different pages to each of the states. But the borders of the state are not square/rectangle/any_regular_shape. The borders are complex shapes. How do I go about doing this?
Even though I break them in Photoshop, how do I recombine them perfectly in CSS?
Thank you!
You want something like this map, you should go for SVG and maybe RaphaelJS is a good start.
Try using an HTML image map:
http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479741
Lots of good tutorials out there.
Consider using D3.js Geo Projections. This post written by one of the main developers behind D3 should be a good start.
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.
Hey guys I have a question, I plan on making a website for a friend that wants a nice description about them, for in terms of design they want something like this:
dsdsdsds
sdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsds
sdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdd
sdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsds
sdsdsdsdsdsd
sdsdsdsd
So basically small line of text at the start, and increase for the middle, then decrease in size near the end, so basically a circle type. Any ideas?
One bad way is to have a fixed number of lines (and maybe no word-wrap). Just do spans and have the id's of each span have a pre-defined width.
A better (somewhat) way is to do something along these lines css circle via stack-overflow. You may have to tweak it though (and I haven't tried it), but you could play around to see of you like it.
I'm pretty certain the latter is the way you would go, but the ease of constructing it may not be overly fast.
Good luck!
After looking around in Google, I have found this:
CSS Text Wrapper
It involves javascript, but you dont really need to know javascript in order to use it.
if you want to achieve that use
<pre></pre>
then apply the css to the text.
Its the easiest way to do that.
I'm a real noob with css and have seen many times, many little icons in a larger file. I'd like to know if I can use something like this for a rating system that I'm making. 5 stars being the best and one being the worst. I'd like to be able to use a single file that contains all of the stars and then based on the rating, show the proper rating. I'm used to doing it the old way by slicing up the images and then showing the rating that way.
What is this and where can I find more info on it?
This is a technique known as CSS sprites. The main advantage is that you save some (or sometimes, a lot) of HTTP requests.
You can read about them here, for example, and one good article to read is also this one on diagonal CSS sprites.
When you come to building your own, there's a lot of tools around that will assemble smaller pictures for you and also generate matching CSS with the proper background-position values.
Try searching for CSS sprites - here's a decent intro
http://css-tricks.com/css-sprites/
and SpriteMe is is a funky little bookmarklet that does the heavy lifting of creating the sprite image for you
http://spriteme.org/
Both links point in turn to other reading for you
It's called css sprites.
its called "css sprites" look on this article, with example how to do it to rating image:
http://www.last-child.com/image-sprites-flexible-and-accessible-packages/
I am messing around and created a neat web layout in Photoshop. I then sliced it up and exported all of the Images and HTML to Dreamweaver. However, it turns my layout into tables. This is a problem because I can't get it to fit all screen resolutions. Does anyone have a quick fix or some advice on how to get my slicing converted to CSS?
You aren't going to get an automated thing like that to work the way you want it to. It's why I started coding. When slicing your psd think about it in the layers it is in, then you will have to figure out how to css it all together. It's alot to learn, but once you get your awesome psd working as an active web page you will realize how worth it it was.