noupe
THE magazine for webworkers and site owners
The CSS attribute clip-path allows you to make sure that not the entire content of a box is displayed in the browser by using complex clipping paths. This way, powerful effects are possible. The web app Clippy takes care of the coding for you. You compile your clipping paths visually and immediately see the result.
Do you like the current ghost buttons or the ones in Material Design? No matter which flat design concept you prefer, I’m sure the small stylesheet bttn.css has one or two buttons you’ll like.
Over the weekend, I stumbled across a bunch of new services and tools that could help ease the life of designers and developers. Among them, there’s a solution for appealing loadtime indicators, aka spinners and loaders, a service that dissects popular logos, as well as a source of inspiration for contemporary color palettes.
CSS blend modes and filters allow for effects that were not possible before. When applying these new options to images, you can create even more impressive effects by stacking or repeating multiple attributes in clever ways. And all of this is done in a nondestructive way. Bennett Feely and his Code Snippets Bennett Feely from...
The web app Fibonacci Flexbox Composer by Max Steenbergen from the Netherlands is an immense help when it comes to getting into CSS Flexbox. Basically, no prior knowledge is needed at all.
Anime.js is another one in an already impressive row of frameworks for animations. In contrast to all the other ones, anime.js does not only allow for the animation via CSS attributes. You can also alter SVG and HTML attributes with animations. It’s hard to image modern web design without the SVG format. This framework came...
Even today, there are still many people that want to print out the entire internet. This can have many reasons. Maybe a team seeks to discuss an article’s content in a meeting. Or maybe somebody wants to read your article somewhere where they don’t have an internet connection. To satisfy these people, each website requires...
When it comes to complex shapes and animations, SVG is often the format of choice, and there’s a reason for that. However, thanks to new CSS3 attributes, you get to create and even animate shapes aside from rectangle and circle, without any SVG being required at all. Complex Shapes Via “clip-path.” The CSS3 attribute “clip-path”...
Creating a website from scratch is a challenging task. You have to combine the skills of a designer and a developer to build something worthy; something that will meet trends as well as comply with requirements. The workflow is time-consuming and requires remarkable effort. However, in some cases, this can turn out to be an unjustified expenditure of...
Very often, when you surf the web, it is likely that you may have noticed how responsive comment sections are more and more becoming a common thing. These are mainly a lot more popular in blogs and some sites that belong to the social media bracket. Here, we shall take a look into how one...
In applications such as InDesign or QuarkXPress, letting letters flow along paths is a long established standard for lining up images and text. With CSS3 CSS Shapes allow you to create the same behaviour in the browser. To do so, you can define paths which the text is supposed to follow, as well as define...
When charging ahead with all of your new strategies for responsive web design don’t forget the one of most important parts – the typographic headlines. Stay ahead of most web designers by paying close attention to how the headlines are playing out on the page at different sizes. That means being very intentional about the...
Responsive web design has established itself as the way of modern web development for a while now. The increasing mobile internet usage makes it necessary for a website to be recognizable even on small displays. This is always a challenge for web designers and developers. Where do I put the complex navigation? How do I...
A free online tool gives a clear overview of all problems that your CSS stylesheets may or may not contain. This quickly shows you what you need to work on. Test my CSS also informs you of why each problem is a problem and gives advice on how to remove it. All you need is...
Starting with version 49, Chrome supports custom properties, namely CSS Variables. Now, another central element of professional programming is ported to the browser without any additional requirements. Variables: Central Element of Structured Programming Variables are an irreplaceable part of professional programming. Just imagine having to manually redefine the values for every single application area instead...
Animated transitions can be done with little effort thanks to CSS3 transitions and are used a lot nowadays. You can alter different characteristics at the same time. There is also the possibility to play with the attributes you want to animate at different times and with different durations. CSS3 Transitions Using Delays The „transitions“ attribute...