Weekly Web Design & Development News: Collective #15

by jQuery Script,

Here's the 15th Weekly Web Design & Development Collective that aims to introduce fresh new, trendy and easy-to-use web design & development resources (freebies, codes, graphics, tools, inspiration, etc) from the past week. Have fun with it.

Web Design & Development News: Collective #15

Diagonal Sliding Hover Transition

A good hover effect can save space on showing more information until hover, while also creating an enticing and interesting effect. The diagonal effect is achieved through positioning a triangle attached to a long rectangle at the right of the image out of sight and transitioning it left through the image so it looks like it is filling up diagonally. This is a CSS only effect.

Diagonal Sliding Hover Transition

[Demo] [Download]

grasp

Grasp is a command line utility that allows you to search and replace your JavaScript code - but unlike programs such as grep or sed, it searches the structure behind your code (the abstract syntax tree), rather than simply the text you've written.

grasp

[Demo] [Download]

Ocrad.js

Ocrad.js is a pure-javascript version of the Ocrad project, automatically converted using Emscripten. It is a simple OCR (Optical Character Recognition) program that can convert scanned images of text back into text. Clocking in at about a megabyte of Javascript with no hefty training data dependencies (looking at you, Tesseract), it's on the lighter end of the spectrum.

Ocrad.js

[Download]

Build a Responsive & Filterable Portfolio with CSS3 Twists

Build a Responsive & Filterable Portfolio with CSS3 Twists

[Demo] [Download]

glsl-transition

Make Transitions Effects with the power of WebGL Shaders (GLSL)

glsl-transition

[Demo] [Download]

jiko

Jiko is a modern and easy to use template engine for Javascript. Its objective is to provide to Javascript programmers a way to write templates with an engine as powerful as server-side state of the art template engines like Jinja and Mako.

jiko

[Demo] [Download]

topcoat

CSS for clean and fast web apps

topcoat

[Demo] [Download]

highlight.js

Highlight.js highlights syntax in code examples on blogs, forums and, in fact, on any web page. It's very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.

highlight.js

[Demo] [Download]

stackedit

StackEdit is a full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.

stackedit

[Demo] [Download]

meteor

Meteor is an ultra-simple environment for building modern web applications.

meteor

[Official Website]

CoverPop.js

CoverPop.js is a lightweight lightbox'y plugin with cookie integration. 100% style agnostic. Responsive friendly.

CoverPop.js

[Demo] [Download]

CSS3 Product Wall

A CSS3 only product wall that demonstrates the use of the :target pseudo-selector.

CSS3 Product Wall

[Demo] [Download]

Pines Steps

Pines Steps is a JavaScript steps (wizard) plugin, developed by Angela Murrell as part of Pines. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use.

Pines Steps

[Demo] [Download]

captionss

Sensible CSS Image Captions

captionss

[Demo] [Download]

Top 10 HTML/CSS3 Front-end Frameworks For Faster Web/Mobile Development

? In this post, I would like to introduce Top 10 HTML/CSS3 Front-end Frameworks listed below that are most popular on the web as well as having most stars on the github.com.

Top 10 HTML/CSS3 Front-end Frameworks For Faster Web/Mobile Development

[Download]

56 Mobile App Icons for iOS

56 Mobile App Icons for iOS

[Download]

200+ Free Psd Arrows

A big one; more than 200+ arrows in psd Photoshop format, all made of editable vector shapes.

200+ Free Psd Arrows

[Download]

Email Template PSD Set 4

Email template PSD set containing 3 different designs.

Email Template PSD Set 4

[Download]

Font Aurora

Aurora is a font inspired from Si-Fi movies and the world of video gaming.

Font Aurora

[Download]

Free Landing Page Template by Start Bootstrap

Free Landing Page Template by Start Bootstrap

[Download]

KAIJU Font

KAIJU is a sans serif typeface that comes in multiple weights (Regular & Bold). Its simplicity makes it a very legible display font, perfect for editorials. The equal emphasis on thick and thin allows for both bold and subtle aesthetics.

KAIJU Font

[Download]