64
There are a lot of ways to animate things on the web. There are even more ways to create animations then export to web animations.
There are huge benefits to designing animations in something like AfterEffects or Animate CC (which can both import Illustrator and Photoshop files) for the obvious reasons of division of labor and use of a graphical editor.
With ...
24
From a purely design standpoint, starting with the mobile version first does make sense.
The hardest part of the design process is always pruning, never adding. So the smaller the screen real estate you allow yourself, the more you'll have to think about what is important in your design, what information you really need to show. Also, you'll force yourself ...
21
As an alternative to the already great answers, how about adding a black div with 50% opacity behind the text?
This would allow the font to work on basically any image also.
div {
position:absolute;
top:250px;
left:140px;
width:500px;
height:50px;
background-color:black;
z-index:0;
opacity:0.5;
}
EXAMPLE
17
I suggest making the font bold (just a change of weight, not the font itself) and respecifying the shadow so that it defines all the edges of the letters:
font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;
You can even combine more than one text-shadow to create a definite outline as well as a blur:
text-shadow: 0px 0px 3px #000, -1px -...
16
It is called subpixel rendering, or subpixel anti aliasing. Microsoft does something similar for most windows applications.
Your screen consists of colors that are next to each other. If you do a simple sample based anti aliasing you do not get the best possible result. But by leveraging of the knowledge of how the pixels are laid out you can get better ...
15
I think the accepted is wrong. The css px is actually Device Independent Pixel(dip), and it is a common pattern to use px as dp in css.
13
I would not continue trying to learn how to slice up a PSD for HTML. This practice is outdated and you're only going to be hurting yourself down the road. In regards to "current standards" people usually code in an IDE. One thing you have to understand with slicing is if you have a responsive website you're going to spend a ton of time trying to cut a ...
12
You could use CSS (keeping in mind this won't work with older versions of IE).
For example, you could combine some shapes like a rectangle and two triangles. See this jsfiddle.
HTML:
<div id="square"></div>
<div class="align">
<div id="triangle-topleft"></div>
<div id="triangle-topright"></div>
</div>...
12
There are a few issues here.
Not everyone uses a grid system and even if they do there's no guarantee the grids are consistent. Maybe your example uses a four column grid with a wider left column.
Grids are a tool. A guideline. They don't necessarily mean you are bound to your grid 100% of the time. Often, if people are designing using a pre-baked framework ...
11
The advantages tend to be primarily:
Rapid Prototyping (ie, speed)
Built-in Cross browser consistency
If you need to create a grid, and the grid you need to create fits the pre-built CSS framework, then the logic is that you're halfway there by using the framework.
All that said, I tend to agree with you. CSS frameworks, IMHO, are like visual design ...
11
I'm familiar with HTML5 Boilerplate, but I'm more familiar with Bootstrap, so I'll talk about that. Remember that both are geared towards two different tasks, (H5BP is a responsive normalised template, Bootstrap is a collection of HTML/CSS/JS widgets and a responsive grid.) In fact they can be used together.
However, I can't help but wonder if Bootstrap ...
11
This question is interesting. I've honestly never heard of a limited number of font-sizes. I have, however, heard of the number of font-faces generally not exceeding 2 or 3. In today's responsive web, you'll see font-sizes changing all the time depending on the viewport.
This wouldn't be a good answer without some sources, so there are two interesting ...
11
When drawing a citcle in Inkscape then this will be its path :
To convert this path to Bezier lines just select the object, then choose Path > Object to Path:
We can now insert nodes, break paths or whatever there is we need to do (below example was obtained by inserting 3 nodes and deleting the path between two selected nodes):
11
Skeuomorphism is really the opposite of flat design. Google's "Material Design" is merely their branding name for their specific interpretations of flat design. It's still flat design though. "FLat Design" was coined by Apple when they released iOS7. It caught on because it was the first term used, it could just have easily been called "Material Design" if ...
11
This might not be quite the answer you're looking for, but I find it better than handing mediocre, auto-generated styles to the engineers.
Selective markup
I'm sure you've discovered Sketch's context menu CSS grabber. You can select as many objects as you like and you'll get the CSS on your clipboard faster than you can paste it.
There's no selectors of ...
11
Mobile first is best practice -- it's not law, and if you understand why you "should" be using it, you can make an informed decision as to why you don't want to use it on a particular project, and that's fine.
It's worth noting that "mobile first" relates to the design/UX and the build itself. Mobile first design won't speed up your site for users, but ...
10
If you mean something like this:
Edit: here's a way which only requires one HTML element and so won't be weird when read by non-CSS-styling clients like search engines, screen readers, RSS, 'no style' apps etc (thanks to Dominic for suggesting trying :before and :after).
http://jsbin.com/UtUlIFO/2/edit
The important code (add your colours to this):
HTML: ...
answered Oct 10 '13 at 17:00
user56reinstatemonica8
26.3k18 gold badges94 silver badges178 bronze badges
10
Demo
css
.demo-container {
height:300px;
overflow:hidden;
display:block;
position:relative;
/* CSS3 Gradient */
background: rgb(125,126,125);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/...
10
I didn't love the answers and comments already provided; too much code for a simple sphere in html - css. You can simply do:
<div class = "sphere">Test</div>
The CSS:
body {
background: #333;
}
.sphere {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
color: #FFF;
margin: 100px auto;
/* ...
10
Is is possible? Yes.
Technology-wise, you would do the same thing you'd do for language localisation (see this related SE question for the specificities).
Localization refers to the adaptation of a product, application or
document content to meet the language, cultural and other requirements
of a specific target market (a locale). Source
Seems like ...
9
Looks like the link Ian Dunn posted might be your ticket. Here's an excerpt from that page:
In the SVG export options, I select Style Elements, and I select the Include Unused Graphic Styles option. It will declare sandStyle and blueSky as CSS styles in the SVG document.
Here is the SVG output generated by Illustrator CC:
<style type="text/css&...
8
I believe the full answer to your question can be found here:
https://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-in-android
To convert dp to px you need to take account of the display dimensions you are addressing to. The greater the DPI, the more pixels you'll have to cram in the same area to make it look good and to avoid ...
8
Open image in Photoshop
Go to Filters > Other > Offset
Adjust vertical offset so that the image seam is in the middle of the image
Use the liquify tool to seamlessly connect the ribbons together
Fail miserably
Consider trimming all excess whitespace, and use background-size: contain instead
More info on the background-size property
8
If I were you I'd abandon the Idea. Hires handling is the least of your problems, because there is simply no support within E-Mails.
But the problems start earlier. Most email clients strip out images and add a button where the user can activate the images. All this fuss for just a logo is just too much of a hassle.
I would just write the sig with ...
8
You have two main options as workflow (although as DA01 pointed out, these are just a few of many possible ones):
Create the mockups in Photoshop or similar software, and then manually re-create them in HTML/CSS;
Create the design directly in HTML/CSS.
In option 1, you would basically use the photoshop file as a reference, mostly to calculate distances and ...
8
Consider using established UI patterns like the burger menu icon or an arrow to show that there is a draw or menu. The icon is enough for people to know there is navigation / settings to be clicked.
This is just a quick sketch, but you can get icons like this from Bootstraps library.
8
The rendering of UTF emojis is platform / vendor specific. There is no CSS or other tricks involved. Different vendors (Apple, Google, Microsoft, Mozilla, Samsung etc.) simply chose to provide different icons for these UTF characters.
In Chrome on a Mac, for example, the two alien characters you linked to do not appear in green. This is what they look like:
...
8
I needed to convert <linearGradient> from many SVG files to CSS, and I made this: https://codepen.io/JosephusPaye/pen/vbaxBa?editors=0010.
Paste an SVG source and it'll extract all the <linearGradient>s and convert them to CSS.
How it works, in summary:
Parse the input as an SVG document
Find all <linearGradient>s
Calculate the slope ...
7
The nice thing about templating systems and frameworks is that they can save you a lot of time iff you work the way they want you to. So, with Bootstrap, once you learn their semantics for doing a JS carousel, it's almost criminally simple to implement. Also, Bootstrap seems to get a lot simpler if you either roll your own before you get started or use ...
7
If it's visual representations of elements you're looking for, nothing beats Firefox's 3D view.
Open Firefox, press F10 to show the toolbar if necessary, go to tools, hover over web developer and get familiar with all those awesome tools.
To open the 3D view, make sure the console is visible by selecting one of the options in the web developer menu such ...
Only top voted, non community-wiki answers of a minimum length are eligible
