I am planning to create a little website(forum) with Quiz questions. So I had an idea to make cool borders in Photoshop(ice, fire, earth) and to implement them on the website. I don’t have any experience in creating live websites whatsoever, so I am interested to know what are the best practices for doing this? The problem is that questions could have anywhere from 10 to 100 words so I need different border sizes.
I currently have two ways of doing this, but neither really satisfies me.
1) Create different border sizes in photoshop and when posting questions check for character length and use appropriate border.
2) Create images with questions already, and post it like that.
I am also worried about the speed of the site. I realize that this is not a common practice, but is it doable? Any input or guide is appreciated.
The easy way to do this is with the CSS border-image property. You can create a square image with the borders you want and then add a CSS prroperty with the following format:
question-border{
border-image: url(<url of image on webserver>) <px size of border> <stretch/round>
}
Using stretch will stretch the middle part of the image, while using round will tile it.
The example on w3schools shows this well.
Related
I am looking for some insight on how to achieve a certain result with email-specific HTML+CSS. I've done some searching and I can't really find anything quite specific enough to fit my needs. I am a decently experienced front-end website designer/builder, but I am new to email HTML. My clients have always used a drag and drop service, but I want to be able to offer higher-quality email designs.
Here is an image that shows my desired outcome, with the green color being the background of the body of the email so that the shape just blocks out the correct parts of the image:
I know this might not be possible with the limited html/css that is required in email design, but if it is I'd love to see an example of it working or if anyone knows a good resource to learn the ins and outs of email code I'd really appreciate it.
My idea originally was to use image 1 as the background of a table, then the 2nd layer of the table, use image 2 as the background, or just add in the image inline with full width. I'd love to be able to put text positioned center, but again that might not be possible, I just don't know the limitations well.
Thanks!
I want to create a rounded border in CSS that looks pixelated when zoomed in.
This is what a rounded border looks like up close: http://imgur.com/zbNv8pB
And this is what I'm trying to make it look like: http://imgur.com/ODK6Cm3
This is a specific aesthetic that I'm trying to achieve with my site, but I could not find any tutorials on how to do this. What I want to know is if this is possible outside of going oldschool and using images. I'm sure anyone who wants to recreate old-fashioned looking webpages will find this useful, and there's an entire community of pixel-artists that would love to use this too.
The fact that I can find no help on this tells me it's either not possible or I'm literally the only person who cares about this. If it's the latter then that's a serious negligence on the part of this programming language, especially when this option is already available for images with image-rendering.
Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.
I'd like to circle mask the following:
See on maphttp://a.tiles.mapbox.com/v3/sinan.map-l9wtmm6y.html#15/41.00996511838453/28.974809646606428'>
I checked the previous topics but since I am very new to html I couldn't find the answer.
appreciate your helps.
It would depend on how you want to go about it, the simplest and unfortunately the least robust route would be to create a large .png with the alpha in the center transparent.
There are also ways to do it using html5 canvas, CSS3, etc. but I think the more important question is what you are trying to do with it before you decide the route to take. (do you need it to resize, do you need it to change colors, etc.) Here is a link to another stack overflow post that may get you on your way.
Best way to mask an image in HTML5
I am coding a WordPress theme from a design that has been provided to me. Each post (in the design) is on a background that looks like a piece of paper:
The issue is that (of course) I don't know how long each blog post will be. I want to slice and dice the image in such a way that it will repeat to fill the blog post div as needed, while still maintaining the look it was designed to have (including the rough edges with transparency, etc.)
I've considered several different ways of accomplishing this, like creating a top, kludged-repeatable middle, and bottom, but everything I've tried is pretty clunky and requires large (filesize) images.
I'm asking here in case there is some technique I should be using but don't know about. I'm having a hard time explaining to Google what I'm looking for, so I'd be grateful for even hints on what keywords to search for.
Might want to consider border images (though apparently no support from IE)
Nowadays, you can have multiple background images and/or gradients. (IE9 does support, but gradient support is all over the place in most browsers; you'd probably have to find a gradient generator like http://www.colorzilla.com/gradient-editor/ or use css3pie http://css3pie.com/demos/gradient-patterns/ (or both) Don't forget, because you can have multiple background images, you could create some effect with alpha transparency on your images as well.
You can't. There are two options for faking it.
Create a really long (large) image and assume that no post will go over a certain length.
Create a top and bottom image "cap" and repeat in the middle. You can make the repeating image large enough that it looks kind of random, but it really isn't.
The real solution is to go back to the designer and tell them this just isn't possible. A real-world solution would be to create a background image that fades to some solid color. That way you can define the background like background: #000 url('your-image.png') no-repeat center top; and have the image fade to black (or brown as indicated by your screenshot).