- Hongkiat.com

Thoriq Firdaus

Graphic & web designer; having been about 2 years working as a freelance designer specializing in e-Commerce for retail industries. He also shares his enthusiast in web design at creatiface.com and can be contacted on Twitter @creatiface

Thoriq's Google+ Profile

Sort by:

Switch Display

Web Design: A Guide to CSS3 pseudo-classes

The pseudo-classes are used to target elements without having to add extra classes, attributes or ID; that is why it is called in that way, pseudo-class. Throughout our previous posts, we have covered a few new CSS3 pseudo-classes, including :not, :before and :after, :first-of-type and we also use pseudo-classes in … Continue reading »
UI Design: Simple Ways to Add Mobile Navigation Icons

More people are surfing the Internet via mobile devices these days, thus a few things on websites need to be adjusted to fit in those smaller screen sizes. This also includes Web Navigation. The icon below, if you may, is the most popular icon to represent “mobile menu/navigation”. In this … Continue reading »
UI Design: Glossy Buttons with CSS3 Gradient

We have covered CSS3 gradients a few times, from linear gradient, radial gradient and repeating gradient. This time, we try to utilize these features to create a nice effect, which previously required using a few images for it to work. In this post, we are going to create the glossy … Continue reading »
UI Design: Creating Cool OS X Flip Effect with CSS3 3D Rotation

There are two types of transform available in CSS3 specification, 2D and 3D. In our previous post, we have discussed on CSS3 Transform 2D. So, this time, we are going to look into transform elements in 3D space and specifically in this post, we are going to also create the … Continue reading »
UI Design: An Intro to Flexible Box

In a previous post, we have discussed that HTML elements are essentially a “box”. Traditionally, when we position those boxes, whether to the right or to the left, we use the float property. .main { float: left; } .sidebar { float: right; } There is one certain downside when we … Continue reading »
Web Design: CSS Image Sprite with Compass

CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many ways and handy tools to do this, or else you can also do it traditionally with Photoshop. But, through all my experience of dealing … Continue reading »
Collaborate On Design Projects Remotely with GoVisually

Remote collaboration via email is a pain. It takes time and choosing between Reply and Reply All is sometimes so complicated that some won’t be able to keep up with the discussion. This is not good news for large teams, particularly those that include the clients in the mix. Things … Continue reading »
Web Design: Equal Column Height With CSS

Ttraditionally, a website consists of the main section and a sidebar on the layout. Commonly, the content that is contained in the main section could be longer than the sidebar, which makes the height of these two sections unequal. In some cases, we want the height to be equal. There … Continue reading »
A look Into: Using Encoded Image In CSS (background-image)

As designers, adding background image via CSS is definetely a no-brainer to you. Traditionally, or typically, here’s how we do it – using background-image property and link directly to the image source file. div { background-image: url(img/image.png); } However, each image url that we add in that way will cause … Continue reading »
Fresh Resources for Designers and Developers – April 2013

We are already in the second quarter of the year. While some people might fool you with jokes, we will share goodness instead, especially for designers and developers. In this round, we have some great tools for you to facilitate your work — from a tool that allows you to … Continue reading »
Free Web Font Services – Compared

All these years, websites are restricted to typical fonts such as Arial, Georgia, Times and so on. This is due to the limitations of browsers, which at one time, were only able to deliver fonts from the user’s machine. Fortunately today, the web evolves fast and today’s browsers are supporting … Continue reading »
Sticky Position (Bar) with CSS or jQuery

The idea of ‘sticky position’ is to make elements on a website stick and remain visible. Those elements will initially be in their position, and then in the event of scrolling down the webpage, their position will be following the scroll. This practice has been applied wildly including on a … Continue reading »
How to Create A Web-based Video Player

In our previous post we have covered how to create an Audio Web Player as well as how to customize the player skin. This time we are going to do it with video. Yes, we are going to create a Web Video Player. The video player will be embeded using … Continue reading »
Web Design: Drag and Drop with jQuery UI Sortable

We have covered how to give custom style to jQuery UI, starting from the UI Accordion, UI Slider and the UI Date Picker. Today we will continue our exploration on jQuery UI in theming jQuery UI Sortable. This particular plugin will enable a group of DOM to be sortable, meaning … Continue reading »

Page 1 of 712 3 4 5 6 7 »

Back to: Top | Home

hongkiat.com

Thoriq Firdaus

Sort by:

Web Design: A Guide to CSS3 pseudo-classes

UI Design: Simple Ways to Add Mobile Navigation Icons

UI Design: Glossy Buttons with CSS3 Gradient

UI Design: Creating Cool OS X Flip Effect with CSS3 3D Rotation

UI Design: An Intro to Flexible Box

Web Design: CSS Image Sprite with Compass

Collaborate On Design Projects Remotely with GoVisually

Web Design: Equal Column Height With CSS

A look Into: Using Encoded Image In CSS (background-image)

Fresh Resources for Designers and Developers – April 2013

Free Web Font Services – Compared

Sticky Position (Bar) with CSS or jQuery

How to Create A Web-based Video Player

Web Design: Drag and Drop with jQuery UI Sortable

Popular Now

Readers' Fav

About Us

Navigate

We're Social

Our Partners