Gaming
Entertainment
Music
Sports
Business
Technology
News
Design
Fitness
Science
Histoy
Travel
Animals
DIY
Fun
Style
Photography
Lifestyle
Food
2018-04-24T06:40:41.271Z
0
{"feed":"CoDrops","feedTitle":"CoDrops","feedLink":"/feed/CoDrops","catTitle":"Design","catLink":"/cat/design"}
This content is sponsored via Syndicate Ads Truly understand your site visitors’ behavior Hotjar is a quick and easy way to truly understand your visitors and identify opportunities for improvement and growth. Try it for free Cards and Composability in Design Systems An excellent article by Nathan Curtis on structure, content, style and behavior of composed components. Read it React in patterns A free book about common design patterns used while developing with React. By Krasimir Tsonev. Check it out Replace Animated GIFs with Video Jeremy Wagner shows how to replace large animated GIFs with lighter videos. Read it pico.js A compact face-detection library in JavaScript with real-time detection capabilities. Check it out

Today we’d like to share Oasis, a responsive Jekyll template with you. Oasis was designed for developers who want to set up a small landing page for their mobile applications. It is made with usability and simplicity in mind for you to easily customize.

Oasis is a responsive one page template which also comes with a Sketch file.

You can use Oasis freely for your personal project or commercially, for your client work.

Live demo

Check out the live demo: Oasis Live Preview

Download the template for free:

You can download the ZIP file of the template and the design file here:

Use it freely but please don’t republish or redistribute the template.

We hope you enjoy this freebie and find it useful!

If you’d like to contribute and publish your freebie on Codrops drop us a line.

Freebie: “Oasis” Jekyll Website Template was written by Amie Chen and published on Codrops.

Inspirational Website of the Week: Charles Simon Smooth transitions and a unique design made us pick “Charles Simon” as inspirational website this week. Get inspired Our Sponsor Everything IT requires and Developers love HelloSign API’s robust SDK, amazing support, detailed documentation, and super clean dashboard is sure to make your entire team happy. Get started for free Oh Man, Look at Your API! Alexey Kuznetsov’s complete guide for building and improving APIs. Read it Creating a Panning Effect for SVG Great article by Louis Hoebregts on how to achieve panning on an SVG. Read it How browsers position floats A nice visualization by Monica Dinculescu that shows how browsers position floats. Check it out

Today we’d like to share a little reimplementation of an interesting effect with you. The idea came from this Reddit entry which describes a method of showing an image less pixelated the stronger the password entered is. You can see the idea in action on the signup page of Colibro. We thought this was an awesome idea and wanted to experiment with it, and also with the reverse logic.

So go ahead and try it out: start entering a password in the form and see the image getting a different amount of pixelization. The second demo shows the reverse logic where the image gets more obscured when the password is getting stronger.

The demo is kindly sponsored by HelloSign API: Everything IT requires and Developers love. If you would like to sponsor one of our demos, find out more here.

Attention: Please note that this is highly experimental and might not work well in older browsers.

We hope you like this little effect and find it useful.

References and Credits
Our Sponsor Everything IT requires and Developers love With a robust SDK, amazing support, detailed documentation, and super clean dashboard, HelloSign API is sure to make your team happy. Try it today Scroll to the future Anna Selezniova and Andy Barnov take us on a tour of the latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Read it Front-End Developer Handbook 2018 A guide written by Cody Lindley on the practice of front-end development, how to learn it and what tools are used. Check it out Length.js A useful JavaScript library for length units conversions. Check it out Eclipse An interactive experiment made by Cameron Adams.
Inspirational Website of the Week: Célia Lopez A great design with some futuristic details and effects. Our pick this week. Get inspired Our Sponsor Everything IT requires and Developers love With a robust SDK, amazing support, detailed documentation, and super clean dashboard, HelloSign API is sure to make your team happy. Try it today Color: From Hexcodes to Eyeballs Jamie Wong’s fantastic exploration of electromagnetic radiation, optical biology, colorimetry, and display hardware. Read it @keyframers 1.0.0 The @keyframers premier, where David Khourshid and Stephen Shaw live code an animation. Watch it Displaying the Weather With Serverless and Colors Join Burke Holland in this fun project where he builds a weather bulb that shows a certain...

Today we’d like to share a little hover effect library with you. The effect goes as follows: when hovering an image, we’ll use a displacement image to transition to another image. Using different displacement images, we can create a variety of looks. The main idea behind this little library is to recreate an effect similar to what we have done previously, but with broader support, better performance and that is easier to customize.

The demo is kindly sponsored by HelloSign API: Everything IT requires and Developers love. If you would like to sponsor one of our demos, find out more here.

The animation is based on WebGL and we use three.js, so it works in all recent browsers.

To get started we need two main images and one displacement image to create the effect.

Here is an example displacement image we’re using:

The effect works in the following three steps:

  1. Modifying the images with the displacement image
  2. A classic fade between the 2 images
  3. Reverse the displacement

We can use a simple div to initiate our effect:

var myAnimation = new hoverEffect({
	parent: document.querySelector('.my-div'),
	image1: 'images/myImage1.jpg',
	image2: 'images/myImage2.jpg',
	displacementImage: 'images/myDistortionImage.png'
});

Pitfalls of Card UIs An insightful article on the problems of the card UI design pattern. By Dave Rupert. Read it Our Sponsor The WordPress Theme that follows the latest design trends Be Theme is a ThemeForest top-three bestseller, with over 105,000 downloads to date. With a 4.8/5 rating based on 4,831 reviews, this WordPress theme looks to be an ideal solution to satisfy your clients’ needs. Check it out Windows File Manager (WinFile) The original Windows File Manager (winfile) with enhancements for all currently supported versions of Windows, including Windows 10. Check it out HueSnap A great tool to get some nice color inspiration from images. Check it out 36 Days of Type 2018 Animography is sharing amazing type inspiration for 36 days in a row. Check it...
Inspirational Website of the Week: The Shift An innovative design with beautiful effects. Our pick this week. Get inspired Our Sponsor The Fastest Way to Build a Custom Website PageCloud is the #1 rated Website Builder on TrustPilot with a 9.5/10! You’ve never built a site like this before. Try it free today! Check it out Creating Themeable Design Systems Brad Frost dispels the myth that design systems impose stifling rigidity on design teams. Read it Lazy Loading Images and Video Jeremy Wagner explains how lazy loading helps lower initial page payload and load time. Read it Are Mobile Pop-Ups Dying? Are They Even Worth Saving? A very insightful analysis of the mobile pop-up pattern by Suzanne Scacca. Read it
Public Design Vault Public Design Vault is a curated directory of 500+ design tools and resources for public good. Check it out Our Sponsor Ever find yourself thinking “I wish I could do that?” With Udemy, you can. From web development to digital marketing to cooking courses, Udemy has something for everyone for as low as $10.99. Plus, each course comes with a 30-day money-back guarantee for risk-free learning. Pick your course Site Palette A browser extension that extracts the essential colors of a website. Check it out Consola An easy-to-use console logger with a fancy output style. Check it out Understanding Logical Properties And Values A great article by Rachel Andrew where she explains...
Inspirational Website of the Week: The Mads Smooth animations with playful interactions made us pick “The Mads” this week. Get inspired Our Sponsor Mobile Authentication Simplified With 5 minutes and a few bits of config, you can build an app connected to OpenID, Active Directory, OAuth2 or SAML. Learn more Tabler A well designed dashboard template with a responsive and high quality UI. Check it out JavaScript in 14 minutes A fantastic little guide that will get you started with the most important JavaScript concepts in an interactive way. Check it out Storyboarder A great tool to create story visualizations in a quick and easy way. Check it out

Today we’d like to share a little menu animation with you. The idea is inspired by an effect that can be seen in this video, right at the beginning: a couple of differently sized boxes slide out and fill the screen. We thought this might be a nice idea applied to a menu using CSS Grid.

The demo is kindly sponsored by monday.com: Knowledge Sharing System perfect for your team. If you would like to sponsor one of our demos, find out more here.

We use anime.js for the animations and imagesLoaded for preloading the images.

Attention: Modern CSS properties at work, please view in an updated browser!

We’ve created two different styles; have a look at the screenshots and check out the demos.

To open the menu, click on the + info in the bottom left corner.

We hope you enjoy this little menu and find it useful!

References and Credits

Expanding Grid Menu was written by Mary Lou and published on Codrops.

Bringing interactive examples to MDN Will Bamberg writes about how interactive examples were added to the MDN JavaScript and CSS reference pages. Read it Our Sponsor A seamless way of managing work from start to finish The Paymo App allows your small business to focus on your business – not your paperwork. Tracking your time, creating estimates and invoices is made simple using this App. Try it free Crunch Crunch is a macOS tool for PNG image file optimization built on pngquant and zopflipng. Check it out Figma Platform The Figma Platform enables apps, websites and internal tools to integrate directly with the realtime state of design in Figma from using a Web API and an open JSON format. Read more about it in this article. Check it out
Inspirational Website of the Week: Mustafa Çelik Beautiful liquid effects and great typography. Our pick this week. Get inspired This content is sponsored via Syndicate Ads Northwestern’s Online MS in Information Design & Strategy Build skills to translate data into compelling visuals and narratives and learn how research and analytics can drive communication strategies and tactics. Find out more Machine Learning-Driven Bundling. The Future of JavaScript Tooling. Learn about the early implementations of zero-configuration build tools which are powered by machine learning to create the most optimal build. By Minko Gechev. Read it GraphQL CSS A blazing fast CSS-in-GQL library that converts GraphQL queries into styles for your components. Check it out How Fast Is Amp Really? Tim Kadlec takes a closer look at how fast AMPs really are considering different contexts. Check it out
Pixelify A community for sharing digital items that are free for personal or commercial use. Check it out Our Sponsor monday.com: The #1 Trello alternative for your team Manage your design projects & tasks, plan product roadmap visually, and communicate all in one place while you stay-on-top of your team’s entire workflow. Create a free account ScrollBooster A small drag-to-scroll library made by Ilya Shubin. Check it out Emma Powered by Algolia and Yarn, Emma is a command line assistant which helps you search and install packages more quickly. Check it out UI Faces A very useful avatar aggregator that uses different sources. Made by Mighty Alex. Check it out
Inspirational Website of the Week: Murmure An artsy look with great typography and slick effects. Our pick this week. Get inspired Our Sponsor Design, Develop and Test Your Apps with Sencha Ext JS Build better apps faster with a single, enterprise-ready framework, complete with a robust UI component library that’s fully supported. Try it for free Rough.js With Rough.js you can create graphics with a hand-drawn, sketchy, appearance. Check it out A DIY Web Accessibility Blueprint Beth Raduenzel helps us create a blueprint for website accessibility. Read it Making WebAssembly better for Rust & for all languages Lin Clark explains how Rust needs to work well with the JavaScript ecosystem in order to be useful as a web language. Read it

After playing with an experimental CSS Glitch Effect for images and text, one of the first questions we got was “how can this be used in a slideshow”? The animations we used for the glitch effect were tuned to run infinitely, so the keyframes were adjusted to that. In a slideshow we have a different scenario: we want to apply the glitch effect at a specific moment and exchange the image with the new one of the next slide. This kind of animation can also be used for hover effects.

This slideshow does exactly that: it transitions to the next slide using the glitch effect. Under the hood, it exchanges the glitch layers one by one and stops glitching once the last image is switched.

The demo is kindly sponsored by: GitLab 10.1 which now allows you to manage your visual assets like you manage your code. If you would like to sponsor one of our demos, find out more here.

Attention: Please note that the CSS clip-path property does not work in IE or Edge.

CSS Gradient A great place where you can create, explore and learn about CSS gradients. Check it out Our Sponsor The web hosting that WordPress recommends Bluehost is the #1 hosting service that is used by over 2 million websites and recommended by WordPress itself. Check it out Google Art & Culture Experiment – Art Palette A great experiment by Google for showing art images with related color palettes. Check it out Creating a Parking Game With the HTML Drag and Drop API In this tutorial by Omayeli Arenyeka you’ll learn how to create a parking game with the Drag and Drop API. Read it Standardizing lessons learned from AMP Read about Google’s work on web standards to allow instant loading and Google Search features for all pages, not just the...

Today we’re very happy to share 10 unique illustrations with you. The set contains detailed and modern line illustrations of a designer’s workspace in two different views (top and frontal).

About the Designer Workspace Illustrations

This colorful set contains 10 line illustrations of a designer’s workspace in two views (top and frontal). A touch of Pantone’s color of the year 2018 “Ultra Violet” gives it a futuristic modern look, even more so when combined with vibrant gradients and light gray elements. Whatever you might need on your desk as a designer is included: technology, designer software, notebooks, pens, color swatches and even plants to brighten up your space.

The following files are included in the set:

  • 5 top view illustrations
  • 5 frontal view illustrations
  • Ai files
  • EPS10 files
  • PNG files (optimized)
  • SVG files
Preview

Check out a preview of the illustrations:

Download the Designer Workspace Illustrations for Free

You can download the freebie here:

The illustrations are free for personal and commercial use. Please don’t resell or redistribute them.

If you are interested in more workspace themed line illustrations check out the Her Workspace Illustrated Instagram Pack:

Inspirational Website of the Week: Mutt Agency A playful design with lots of creative elements. Our pick this week. Get inspired Our Sponsor Thinking of building your portfolio? Grab a FREE .design domain to showcase your work. .design reflects what you do as a designer and helps give you better branding. Get your FREE .design domain Loading Third-Party JavaScript Learn how to optimize the loading of third-party scripts to reduce their impact on performance. By Addy Osmani and Athur Evans. Read it Bringing Back Skeuomorphic Design Read about Michael Flarup’s skeuomorphic calendar design and how this could be the starting point of a revival movement. Read it The Chameleon from Null Island An awesome demo with a very reactive chameleon. Check...