All posts tagged “Techniques”

Effective Web Typography: Rules, Techniques and Responsive Design

You’re reading Effective Web Typography: Rules, Techniques and Responsive Design, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Effective Web Typography: Rules, Techniques and Responsive

Responsive Web Design isn’t just about columns, grids, images and icons. All of this will not make sense without text for content. As Bill Gates once said “Content is King.” When it comes to content, we need to talk about web typography. Looking at modern web design trends, having responsive typography is a big factor […]



Designmodo

An Insight Into The State Management Techniques Offered By ASP.NET

There is a common constraint that can be observed in the functioning of almost all the web applications, which adds to their stateless behavior. It is the intermittent connection between the Server and the Client.

An Insight Into The State Management Techniques Offered By ASP.NET

What happens is, while implementing the HTTP (Hyper Text Transfer Protocol) for communicating over the web, a particular pattern is followed that is known as request and response. This pattern is actually stateless in nature as it doesn’t retains the state of any request or its corresponding response. Therefore whenever a client initiates a request to the web server, the web server creates a completely new object of the request. This ultimately causes interruption in the connection and creates bottlenecks in the performance.

Fortunately, the ASP.NET offers a great solution to overcome this issue with several effective state management techniques for web applications.

Let’s ponder into the amazing offerings of ASP.NET and understand how it helps retain the state of the controls.

It has been observed that when the request and response pattern creates the round trips, the server control value is somehow retailed while the HTML control value is vanished. This is because, the Sever Controls implicitly implement the State Management technique (View State), which has enabled it to retain the states.

ASP.NET offers a number of brilliant state management methods, all of them are meant for different applications. They are basically segregated under two broad categories, namely Client-based State Management and Server-based State Management. Here is a brief introduction to several techniques.

Client-based State Management

In this approach the data is stored on the client’s machine or on the page without involving the server’s resources. This stored data includes all the information related to the interaction between the client and the server. Since, the data is stored at the client’s end, it is more vulnerable to be hacked, thus making the techniques less secure while more scalable.

With this approach, ASP.NET facilitates the below mentioned methods:

1) View State:

This page-level method helps store the information about a particular page until it is active. That is, as soon as the user redirects to another page, all the stored info will get vanished. It thus helps maintain the state at a page level. In this technique, the data is stored in the Dictionary Object form (in the pair of a key and value). All the information is stored in a hashed format on the page itself, but within a hidden field. It can consume a string value but only up to a certain, if the value exceeds, another hidden field is consumed.

With ASP.NET, the View State is the default method that is followed for storing the state for web applications. It is quite simple to implement and is ideal for use when a user is redirected to the same page, and so we need to keep the information persistent until he himself redirects to some other page.

Pros of using View State:

  • Secure the stored info from layman by storing it in the hashed format. In fact to keep it safe from hackers, you can keep the information in an encrypted format.
  • You can customize it as and when desired.
  • It is a great option where you want to implement multiple post backs within a single web page.

Cons of using View State:

  • It is not a safe approach, so sensitive data can’t be stored with it.
  • It may cause overhead problems or increase loading time, by making the page heavy with a lot of info.
2) Cookies:

It offers great customization ease at the client’s side, as cookies are stored either in the memory during the client’s browser session or ao the client’s system. In fact, one can even store the info related to users and track the usage. It possesses a small text file with the maximum size of 4096 bytes, and a client machine can exhibit utmost 300 cookies, while a domain or server can support maximum 20 cookies.

Cookies are further divided into two categories, namely:

Persistent cookie – This kind of cookies exhibit an expiry date and are permanently saved on the hard drive available on the client’s machine. If there is no expiry date corresponding to persistent cookie, it will be considered as a transient or non-persistent cookie.

Non-persistent cookie or Transient cookie – Since, this kind of cookies are stored in the browser memory at client’s end for a temporary amount of time, after that specific time the cookie will get lost.

Pros of using Cookies:

  • It just consumes a few bytes of memory per cookie.
  • Easy and quite simple to use.

Cons of using Cookies:

  • It doesn’t offer a safe approach as it stores the info in client’s machine and thus storing sensitive data is not a viable choice.
  • Any user can disable the cookies by making appropriate tweaks at the browser settings.
3) Hidden Fields:

This is basically a server control, that helps manage the value on a page level and it is a bit similar to a View State. It value is sent via the HTTP Form Collection and along with it the value of other controls is also sent.

Pros of using Hidden Fields:

  • It is quite simple to use.
  • As the value is stored on the page only, the server resources are not used at all. Thus, the Hidden Fields saves the server resources.

Cons of using Hidden Fields:

  • If severals Hidden Fields will be implemented on a page, it will ultimately add weight to the page and make it bulkier and thus increase the page loading time.
  • This approach is not ideal for storing the sensitive data. Since, it doesn’t store the data in an encrypted or hashed format, this technique is not all secure.
4. Application State:

This state is perfect for storing the data that is required to be accessed throughout the application. It occupies the server resources, as it stores the data in the server memory. The Application state is not limited to any particular user or session, rather it is applicable to all the sessions and users. However, in this case the data will be retained only for the time till the application is running, as soon as the application will be terminated or restarted the entire stored data will be lost. In fact, it will also get wasted when a web server will be restarted, as the data is stashed at server’s end.

In the Application State, an object of the HttpApplicationState class is used to store the data. This class is a named object collection, which means that it includes the data of any type. It could be a part of a key/value pair.

Pros of Application State:

  • The Application State has global scope. The data can be accessed anytime when the application is running.
  • There no expiration period by default.

Cons of Application State:

  • Application State requires server resources to store data. This can lead to scalability issues if not handled properly.
  • Application State is not thread safe, so we need to implement Locks.
  • In the case of an application failure or restart, all the stored data is lost.
5. Session State:

This method is most commonly used by several developers for maintaining the application state. In this approach, the value is stored in the form of dictionary collection, that is, it is paired as key and value. Here the server resources are entirely used to store the state of the application. Since, the stored is not passed over to the clients, this technique offers a safe and highly secure method.

In this approach, a separate session with a Unique ID is generated for each user. As this ID is saved on the client’s system, cookies are used for its storage. The Session is killed as soon as the user logs out from the application, and if he returns back to the application in the future, a new session is then created.

It can be used in any of the four modes. Here are the modes:

  • OFF – To deactivate the session, that is, if you are not interested in including the session state in your application, you can set on the OFF mode.
  • InProc – The session variable are stored in this mode by default store. Here, the value is stored in the same process where the ASP.NET application is actually executing. It thus, delivers outstanding performance.
  • State Server – In this mode, the data is stored in a separate process inside the Windows Service. It thus isolates the two processes, one where application is running and second where the data is stored. Hence, its performance is not as good as that in the InProc mode.
  • SQL Server – Here Session data is stored in SQL Server. It’s hard to manage in the InProc mode with multiple server machines. For that, it is better to store the data in the SQL server only, it will make the data centrally accessible to all the machines. This mode offers utmost security, however, it delivers degraded performance.

These five are the most commonly used state management techniques for ASP.NET applications. Integrate that technique in your application which can ensure complete security to the data and speedy performance.

Visit us at InstantShift.com

PSD to HTML


InstantShift

17 Top Free Resources to Learn Online Marketing Techniques

Online marketing is one of the more important aspects of a successful business, large and small alike. For freelance graphic designers, web designers, web developers, or other freelance creatives, a…

Click through to read the rest of the story on the Vandelay Design Blog.


Vandelay Design

38 Visually Awesome CSS Tutorials & Techniques

If you are looking for some cool and visually appealing CSS tutorials and techniques, then look no further. In today’s round up, we are unveiling 38 most useful CSS tutorials along with some cool techniques that would help you a lot. These are the tutorials that focus on making the smaller details of the web visually appealing. These include fantastic text effects, innovative button styles, space-saving navigation systems, subtly animated form elements… you name it.

Without any further ado, here is the complete list for you. We hope that you would like this compilation and find these tutorials and techniques useful for you. Enjoy!

Progress Button Styles

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Menu Transition In Effects

Here I will show a simple effect of making the menu links stack upwards. The second effect I created is a Metro inspired menu that stacks upwards but uses random delays to make it look unique every time.

How To Style And Animate Svg Elements With Css

In this tutorial, I will show you step-by-step how to animate a SVG (Scalable Vector Graphic) icon using CSS. This tutorial will give you valuable insight for using SVG as your preferred graphic format.

Pure CSS3 Star Wars Lightsaber Checkboxes

This is a quick fun little project built to demonstrate the power behind CSS3, and an awesome little checkbox hack.

Apple-like Login Form with CSS 3D Transforms

In this tutorial we will see how we can use these transforms to create an interesting flipping effect on an Apple-inspired form.

CSS Gradient Text Effect

Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).

CSS Button With Pseudo-Elements

In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.

Fluid Menu With Transparent Icon

Buttons With Icons Using CSS

Today we will be creating very simple but attractive buttons with icons. You can use them in your next project and enhance the look.

How To Create A Circular Progress Button

A tutorial on how to implement the circular progress button concept by Colin Garven. We are using the SVG line drawing animation technique as described by Jake Archibald to animate the circular progress and provide a success and error state to indicate the final status.

3D Flat Buttons

Creating Off Screen Menus That Transition Into View Using CSS3

In this tutorial, we’re going to create some slide and push menus using CSS3 transitions.

Flat Drop down Menu using CSS

In this tutorial we will create a really beautiful and simple flat drop down menu using HTML and CSS only. We are not using any JavaScript or jQuery plugin to achieve the drop down effect.

Dot Navigation Styles

Today we’d like to share some subtle effects and styles for simple dot navigation with you. These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion.

Smart Fixed Navigation

A fixed navigation that allows your users to access the menu at any time while they are experiencing your website.

Secondary Expandable Navigation

This simple responsive navigation let users focus on few important menu items, while the entire navigation is still accessible, just one-click away.

Off Canvas Menus with CSS3 Transitions and Transforms

This tutorial will cover an introduction on them, a getting started guide, some improvement tricks, and then finally some awesome demos for you to build off of. Instead of JavaScript, we’ll use CSS3 Transitions and Translations for the animation making them smoother, better performing, and easier to tweak and customize.

Create A Pure CSS Diagonal Menu

In this tutorial, we leverage some CSS3 transformations to create a pure CSS diagonal menu, and include some simple media queries to make it responsive.

Creating Round, Flat and Flip-Style CSS Toggle Switches

In this tutorial, we show how to easily create some fantastic round, flat and flip-style CSS toggle switches. We’ll be using pure CSS to create some toggle switches, adding a neat user experience to checkbox functionality.

Custom Animated Checkbox Inputs Using Css Iconfonts

This tutorial uses the popular fontawesome iconfont to create animated checkbox inputs using CSS3 transitions.

Image Captions That Reveal with CSS3 Transitions

Neat effects for image captions that reveal on hover using CSS3 transitions to transition out the image and transition in the caption on hover.

Single Input 3D Form

A simple 3D form concept where different faces act as different parts of the form. The default state looks like a flat button which surprises the user by rotating to show the next face which is the text input.

Creating A Border Animation Effect With SVG And CSS

The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines.

How to Animate Festive SVG Icons With CSS

In this tutorial, I’ll walk through creating some CSS animated, holiday-themed, SVG icons.

Build a Responsive Pricing Table with Neat Hover States

During this tutorial we’ll be creating a sleek pricing table with some striking hover effects.

How to Create Stylish CSS Buttons

Sweet Ass Button

CSS3 Hidden Social Buttons

Today we’ll be looking at some very simple techniques using CSS3 transforms to make social link buttons. Usually you’ll see these links all over a site sitting there making a site look ugly.

Side Shopping Cart

Closing Door Menu

Off Canvas Menu Animated Links

Create a Google Polymer Checkbox Using CSS3

Radio Click Through

CSS Social Buttons

3D CSS Typography

CSS3 Typography

Neon Glow

Making a SVG HTML Burger Button


SmashingApps.com

A Guide To Better Google Search Techniques

The Internet is so full of information that it’s nearly impossible to check its limits. That’s why, search engines were developed to maintain a search-able database of the web’s content. People employ the use of search engines to look up for information on the web.

In the midst of all search engines lies Google, the most popular and powerful search engine. You type in the query, and the search engine provides you with the search results. In most cases you’re satisfied but sometimes, you’re not. This is where learning the proper techniques to type in your search query comes in handy and this is what we’ll explore in this article.

Why The Need To Learn Proper Search Techniques?

Everyone including students, researchers, writers, etc. requires information, and they use search engines for that very reason. People spend most of their time continuously looking for the right information because they’re not aware of the proper search techniques. Learning and using good search techniques will help you in the following ways:

  • Better search results
  • Saves your time

Note: Search queries or examples are included inside [ ] for better readability. Please do not include [ ] in your search query.

How To Use Google.com

Google is a smart and intelligent search engine with many exciting features. But not all the features are rolled out instantly for all versions. Google.com is always first to get feature updates, and then updates are provided in versions specific to different countries such as google.co.uk, google.co.in, or google.sh

Google’s version for your country might not support all the search techniques described below. That’s why, it’s suggested to use google.com to avail maximum benefits of the search features and techniques.

Tip: Typing google.com automatically redirects you to its version for your country, but you can override this behavior by going to www.google.com/ncr

Basic Search Techniques

1. Keep It Simple

Keep your search simple and web-friendly. Start by entering one or two words, and gradually adding relevant or important words, if you’re unsatisfied with the results. Less is more for a search engine; meaning the less words you query for, the more results the search engine provides as output.

For example:

  • Query: [who is the president of america]
  • Better query: [president of america]

2. Order Of Keywords

Select the right keywords to make your search. Search results completely depend on the given keywords, and if keywords are chosen wisely, then results are more efficient.

Put yourself in the shoes of the author, and think of what words he/she would use to write/describe what you’re trying to find. If you’re looking for a phrase or quote, then keep the order of the words as accurate as possible to get the optimum search results.

For example:

  • Query: [itself divided house cannot stand]
  • Better query: [A house divided against itself cannot stand] (part of a quote by Abraham Lincoln)

3. Skip Unnecessary Parts

Google is smart enough to handle most of your typos, and other things that could just be ignored. That’s why you should skip those things in your query to save time.

You should not worry about the following when writing a search query:

  • Spelling
  • Cases (uppercase or lowercase)
  • Punctuation (dot, question mark, exclamation mark, and more)
  • Special characters (plus, minus, brackets, and more)

4. Social Search

Google is really good at handling searches related to people and social networks. You can search for people and their social profiles using:

+[profile-name]

By adding a ‘+’ before a profile-name, you can search for Google+ profiles and pages.

For example: [+hongkiat]

#[word]

Using the ‘#’ before a word enables you to search for hashtags in Google+, Twitter, and more social networks.

For example: [#privacy]

@[person-name]

You can search for social accounts associated with a person’s name by putting the ‘@’ sign before his/her name.

For example: [@hongkiat]

Intermediate Search Techniques

Note: Zip codes work very well for the US, but for other countries, it’s better to write the country name followed by the zip code.

For example: [new delhi, india] and [india 110033] is the same.

5. Get Sunrise And Sunset Times

You can use Google to get sunrise and sunset times for many cities of the world. Type your search query in the format of [sunrise place-name] or [sunrise zip-code] to get the sunrise time for the specified location. For sunset times, just subtitute the words as per the following style of [sunset place-name] or [sunset zip-code].

For example:

  • [sunrise chicago, usa] or [sunrise 60611]
  • [sunset chicago, usa] or [sunset 60611]

Advanced Search techniques

Note: You can use the Google Advanced Search form for a more convenient search.

6. Synonym Search

You can use the synonym search feature to tell Google to even search for synonyms of a specified word in the search query. This is helpful for when you want to search for a word and all its similar words without having to spend time looking for them individually.

Using the tilde symbol (~) before a word tells Google to search for the words and its synonyms too. Type your search query in the format of [~synonymWord otherWords] to search for the word and its synonyms in a single search.

For example: [~sweet fruit]

7. Search For Numbers In A Range

You can tell Google to search within a range of numbers, such as dates, prices, and measurements. Using two periods (dots) between two numbers makes Google search within that number range and skip other results.

Using two periods after a number indicates a lower minimum (number..) while putting it before the number indicates a higher maximum (..number). Type your search query in the format of [firstNumber..secondNumber otherWords] to search between a specified lower and upper bounds.

For example:

  • [android phone $ 300..$ 500]
  • [television 20..50 inches]

8. Search Using File Types

You can tell Google to search for a specified type of file for your query. Using filetype operators before a type of file tells Google to search only for specified file types and skip other files. Type your search query in the format of [filetype:type otherWords] to search for a specific file type.

For example: [filetype:pdf free photoshop books]

Complex Search Techniques

You can also use more than one of these techniques in a single search query. You can combine the above methods to make a complex search query, which will provide efficient and focused results.

For example:

  • [site:gov filetype:pdf “death rate”]
  • [site:hongkiat.com photoshop OR “adobe photoshop” tutorials]

Conclusion

Congratulations! You have learnt all the useful search techniques to make better searches on the web and have learnt all the tips and tricks to get better and efficient search results. Now you can save a lot more of your time and resources.

So why not head on to the site and try out your new skills? Feel free to share your experience with us too.

Read Also





hongkiat.com

Interview: Ceramicist Ruby Pilven: The Australian artist merges Japanese techniques with a love for luster

Interview: Ceramicist Ruby Pilven


Growing up with two ceramic artists for parents, Australian Ruby Pilven has been experimenting with the craft since childhood. The Ballarat-based ceramicist makes experimental works—from necklaces and rings to folded vases—that are embellished by delicate brushstrokes…

Continue Reading…


Cool Hunting

50 Visually Appealing CSS Tutorials & Techniques


If you are looking for in-depth articles on the inner workings of flexbox, or a comprehensive explanation for using CSS regions, then this is definitely not the post for you. Instead, we have squarely put our focus on those CSS tutorials that not only make the smaller details of the web visually appealing, but are also really useful. You know what we mean… fantastic text effects, innovative button styles, space-saving navigation systems, subtly animated form elements… that kind of thing.

We have organised the tutorials and techniques into the following categories: Typography Techniques; Button Tutorials, Menu &amp, Navigation Techniques, Form Element Tutorials, SVG &amp, CSS Styling Techniques, Styling Anchor Links, Web Page Components Tutorials, CSS Layout Techniques, and finally a mixed bag of cool miscellaneous tutorials. Here you go…

Typography Techniques & Styles

Noah Blon has created and shared a beautiful example of 3D CSS typography on CodePen.
beautiful example of 3D CSS tutorials typography on CodePen css3 techniques

'The Real American BBQ Sauce' extruding text effect technique in CSS Deck.
extruding text effect technique css css3 tutorials techniques

NobodyRocks has created an amazing neon text effect using only CSS3.
amazing neon text effect css css3 tutorials techniques

CSS Button Tutorials & Techniques

In this tutorial you will learn how to build a set of flat and 3D progress button styles. The button itself serves as the progress indicator.
flat and 3D progress button styles css css3 tutorials techniques

Learn how to create simple, yet attractive buttons with icons in this tutorial.
attractive buttons with icons css3 CSS tutorials techniques

Here is a tutorial on how to implement a circular progress button with a success and error state using animated SVGs.
circular progress button with a success and error state svg css css3 tutorials techniques

Learn how to make a HTML burger button (menu) using SVG and CSS.
HTML burger button menu using SVG css css3 tutorials techniques

In this tutorial we take you through the basics of four different button styles – flat, border, gradient & shadow (skeuomorphic), and press style buttons.
four different button styles flat border gradient shadow css css3 tutorials techniques

Learn how to create these 'Sweet Ass Buttons' with cool downstates using pseudo classes.
Sweet Ass Buttons buttons css css3 tutorials techniques

In this tutorial you wil be shown how to use CSS3 transforms to build social link buttons that appear on hover.
 CSS3 transforms to build social link buttons css css3 tutorials techniques

Here are a collection of downloadable 3D Flat Buttons for you to explore and learn from.
collection of downloadable 3D Flat Buttons css css3 tutorials techniques

CSS Menu & Navigation Techniques

This CSS animated side cart is a smart and not obtrusive way of letting users jump in and out from the list of products.
animated side cart css css3 tutorials techniques

In this tutorial you will learn how to create slide and push menus using CSS3 transitions.
create slide and push menus using transitions css css3 tutorials techniques

Learn how to create a flat drop-down menu using CSS in this tutorial.
flat drop-down menu css css3 tutorials techniques

Created by Vincent Perhirin, this tutorial shows you how to create a beatifully fluid menu with transparent icons.
beatifully fluid menu with transparent icons css css3 tutorials techniques

This technique shows you how to build a space-saving fixed navigation.
 css css3 tutorials techniques

Learn how to recereate these dot navigation styles with some subtle hover effects in this tutorial.
build a space-saving fixed navigation css css3 tutorials techniques

This CSSDeck technique show you how to create a space-saving responsive slide toggle menu.
space-saving responsive slide toggle menu css css3 tutorials techniques

In this tutorial you will learn how to create an off canvas menu using CSS3 transitions and transforms.
off canvas menu using CSS3 transitions transforms css tutorials techniques

Learn how to create a sliding menu with animated transition effects with this technique.
sliding menu with animated transition effects css css3 tutorials techniques

In this tutorial you will learn how to create a fixed vertical menu, as typically seen in parallax scrolling sites.
create a fixed vertical menu parallax scrolling css css3 tutorials techniques

When menu space is at premium, this tutorial will come in handy as it shows you how create a secondary expandable navigation.
create a secondary expandable navigation css css3 tutorials techniques

With this highly original technique you will learn how to create a 'closing door' effect, where the entire viewport appears to close on you.
closing door effect css css3 tutorials techniques

In this tutorial you will learn how to create an off canvas menu with animated links.
create an off canvas menu with animated links css css3 tutorials techniques

Learn how to create a pure CSS diagonal menu in this tuorial.
create a diagonal menu css css3 tutorials techniques

Advanced CSS Form Element Tutorials

With this tutorial you will learn how to recreate the Google Polymer checkboxes.
recreate the Google Polymer checkboxes css css3 tutorials techniques

In this tutorial we show you how to create round, flat and flip-style CSS toggle switches.
round flat flip-style toggle switches css css3 tutorials techniques

This cool tutorial shows you how to build the CSS3 Star Wars lightsaber checkboxes you can see below.
Star Wars lightsaber checkboxes css css3 tutorials techniques

This tutorial shows you how to create an animated progress bar that updates the progress based on how far you have scrolled a section of a page.
animated progress bar css css3 tutorials techniques

In this CodePlayer tutorial you will learn how to create an animated single input 3D form.
create an animated single input 3D form css css3 tutorials techniques

This technique shows you how to, using radio buttons, create a simple slideshow/click through box.
a simple slideshow/click through box css css3 tutorials techniques

This tutorial will show you how to build custom animated checkbox inputs using CSS and icon fonts.
build custom animated checkbox inputs css css3 tutorials techniques

Learn how to create effective reavealing image captions using transitions.
reavealing image captions using transitions css css3 tutorials techniques

SVG & CSS Styling Techniques

This tutorial explores how to recreate a border animation effect using CSS transitions on SVG lines.
recreate border animation effect transitions SVG css css3 tutorials techniques

Here you will learn how to style and animate SVG elements with CSS.
style animate SVG elements css css3 tutorials techniques

In this tutorial you will learn how to animate festive SVG icons with CSS.
animate festive SVG icons css css3 tutorials techniques

Styling Anchor Links with CSS

This tutorial will shows you a technique for building HTML5 and CSS3 anchor link tooltips.
building HTML5 anchor link tooltips css css3 tutorials techniques

In this Codrops article they show you multiple methods for designing creative and modern inline anchor styles and hover effects.
creative and modern inline anchor styles css css3 tutorials techniques

Web Page Component CSS Tutorials

Learn how to build a responsive pricing table with some neat hover states in this tutorial.
build a responsive pricing table css css3 tutorials techniques

This technique show you how to create animated and pure CSS tabs.
create animated and pure CSS tabs css3 tutorials techniques

Learn how to recreate the flat responsive sliding boxes, as seen below, using HTML5 and CSS3.
flat responsive sliding boxes css css3 tutorials techniques

Using CSS transforms to scale components and CSS filters to blur the page, this modal window concept aims to give a sense of depth between the page and modal layers.
modal window concept css css3 tutorials techniques

Learn how to create revealing content overlays with CSS3 transitions in this tutorial.
revealing content overlays CSS tutorials css3 techniques

Advanced CSS Layout Techniques

Here is a detailed tutorial that explains how to create a simple parallax scrolling page.
create a simple parallax scrolling page CSS tutorials css3 tutorials techniques

In this tutorial, Ian Lunn explains how to create a fullscreen product wall using some of CSS3's finest features.
create a fullscreen product wall css css3 tutorials techniques

Learn how to create a slide-out footer with this neat z-index trick.
slide-out footer z-index css css3 tutorials techniques

Miscellaneous CSS Tutorials

Learn how recreate the touch ripple effect as seen on Google Design.
touch ripple effect as seen on Google Design css css3 tutorials techniques

This technique demonstrates how to create animated weather icons with pure CSS.
create animated weather icons with pure CSS css3 tutorials techniques

This innovative tutorial will show you how to dynamically colorize videos with only CSS,
dynamically colorize videos with only CSS tutorials css3 tutorials techniques

Here is a simple CSS3 3D experiment showing the conversion of an image into a realistic 3D cuboid on hover.
simple CSS3 3D experiment showing the conversion of an image into a realistic 3D cuboid on hover tutorials techniques


The post 50 Visually Appealing CSS Tutorials & Techniques appeared first on Speckyboy Design Magazine.


Speckyboy Design Magazine

Advanced RWD layout techniques

Read more about Advanced RWD layout techniques at CreativeBloq.com


You’ve made the decision. You’re taking the plunge. You’re done with m-dot redirects, separate content for different devices and constant updates to fix broken content in new devices. It’s responsive or bust. But what happens after the first bit of HTML and CSS is on the page? What if plan A doesn’t work?




Creative Bloq

Unconventional Stools from UHURU: Two unique seats employ bronze casting and traditional Japanese wood-charring techniques

Unconventional Stools from UHURU


Though Brooklyn’s furniture brand UHURU was founded in 2004, it wasn’t until the debut of their 2010 collection of repurposed Coney Island boardwalk planks that UHURU went from a small…

Continue Reading…


Cool Hunting

A 100% Canadian Vodka from Odd Society Spirits: East Van Vodka is crafted with old-world techniques and is only available in BC

A 100% Canadian Vodka from Odd Society Spirits


It’s no secret that vodka is a crowded space in the alcohol industry, often with differentiation between brands seeming to begin and end with the label. So when Vancouver native Gordon Glanz set out to develop a…

Continue Reading…


Cool Hunting