Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged element

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

A design process revealed | stopdesign - 1 views

stopdesign.com/...design-process.html

NED12 design process webdesign css

shared by Vernon Fowler on 09 Sep 12 - Cached
  • I began by studying the content (text) of the existing page, making a model in my head of the document flow and hierarchy. I aggregated the sections of the page into logical groupings and assigned each a priority. I also spent time thinking about the purpose of the project, along with the ideas and concepts Dave Shea was trying to communicate when he created the Garden space and opened it up for other designers to contribute.
  • Showing off advanced CSS trickery is not the goal of this project. Instead, it attempts to demonstrate the beauty and flexibility achievable when designers grasp all the potential of CSS, using it as a tool to create a well-designed aesthetically-pleasing page which remains accessible, well-structured, and efficiently coded.
  • My Garden lists contained groupings of words and thoughts related to gardening, plants and flowers found in a garden, zen-like qualities, beauty and beautiful things, and characteristics of page design. I also created lists of all the elements, IDs, and classes used in Dave’s HTML, some of which made subtle appearances in the final design.
  • ...11 more annotations...
  • Once I exhausted the idea branching, I started drawing thumbnail sketches
  • Once I had a few rough compositions I liked, I began studying typefaces and letterforms.
  • In addition to my affinity for the letterforms, the pronounced medieval style of the headline type created a perfect contrast with the sans-serif modernity of supporting keywords and titles which I set in Helvetica.
  • My next step in the process was to research imagery which could be used as the foundation for background texture, and act as supporting visual content.
  • I tend to keep imagery confined to a particular region of the layout, or reserve it for a specific purpose. In my opinion, the overuse of photography or illustration can quickly create a crowded, chaotic design which just obscures the intention or message of the piece. Contrast is an element of design which I love to work with when creating anything visual. This comes just as much into play with use of imagery in a composition as it does within the image itself. Effectively integrating imagery into a design requires an awareness of balance and tension. Compact areas of motion and activity, countered with spaces for the eye to rest and relax.
  • When designing outside HTML and CSS, I focus on constructing the language and guidelines of the page, determining proportions, widths and heights, gutters and white space, specifying complementing typefaces, choosing relative type size and leading, and the application of color as a means of both obvious and subtle accent.
  • I started writing the CSS for the design at a high-level, focusing on the layout structure, major backgrounds, and large regions of the page.
  • Groups of elements were positioned in correct locations. Then I applied the necessary detail to each element, from the top of the page, down.
  • The addition of a background pattern to the left and right of the primary image was an added benefit of discovering I couldn’t position the header as I originally intended.
  • The vertical alignment wasn’t refined until after each column was already positioned on the page.
  • This unity of thought at the final stage of the process is a strong reason the designer and person responsible for generating the HTML and/or CSS need should be working together as closely as possible, if the two are not already the same person.
Jochen Burkhard

CSS Content | CSS-Tricks - 0 views

css-tricks.com/css-content

css content Property Tutorial web design

shared by Jochen Burkhard on 12 Jul 10 - Cached
  • Jochen Burkhard on 12 Jul 10
     
    CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page.
Jochen Burkhard

5 Simple Ways to Improve Web Typography | Webdesigner Depot - 0 views

www.webdesignerdepot.com/...ways-to-improve-web-typography

typography webdesign web css design tutorials

shared by Jochen Burkhard on 14 Jul 10 - Cached
  • Jochen Burkhard on 14 Jul 10
     
    Type is one of the most-used elements of the web. Think about it. Unless you are YouTube or Flickr, chances are your site visitors are coming for your text content - not the fancy packaging that surrounds it. So why are web designers still treating text like a secondary element?
Redesign Unit

Flash Custom Website Design - 0 views

customswebsitedesign.blogspot.com/...ash-custom-website-design.html

Best Web Redesign Company Custom Website Design

shared by Redesign Unit on 06 Sep 10 - No Cached
  • Redesign Unit on 06 Sep 10
     
    Web Redesign that are developed on Flash provide facility to incorporate sound as a background element or as a synchronized element. A flash site can be loaded in a one go, and once it gets loaded it is easy for any visitor to go through different areas of the site without reloading.
Leandro Ardissone

Pure CSS speech bubbles - Nicolas Gallagher - 10 views

nicolasgallagher.com/...bubbles.html

css

shared by Leandro Ardissone on 05 Mar 10 - Cached
  • Leandro Ardissone on 05 Mar 10
     
    All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.
Raja uk

Another In-Place Editor | jQuery | Ajaxmint.com - 0 views

ajaxmint.com/...another-in-place-editor-jquery

ajax editor jquery

shared by Raja uk on 05 Jan 10 - No Cached
  • Raja uk on 05 Jan 10
     
    This is a script that turns any element, or an array of elements into an AJAX in place editor using one line of code.
Jochen Burkhard

Towards A Cooler Focus Caret - 0 views

www.sitepoint.com/...towards-a-cooler-focus-caret

javascript css Outline

shared by Jochen Burkhard on 14 Apr 10 - Cached
  • Jochen Burkhard on 14 Apr 10
     
    he focus caret is that dotted outline you see around HTML elements when they have the focus. In some Mac browsers you see a standardized glowing blue border instead, but most browsers show a dotted outline. It's not usually pretty, but it is completely necessary to give an indication of which element has the focus.
Jochen Burkhard

jQuery UI's Position Function (plus, MagicZoom from scratch) | CSS-Tricks - 0 views

css-tricks.com/jquery-ui-position-function

jquery Zoom image design UI Positioning javascript Library

shared by Jochen Burkhard on 03 May 10 - Cached
  • Jochen Burkhard on 03 May 10
     
    jQuery UI now has a position utility function that makes the job of positioning elements relative to other elements deliciously easy! Let's take a look.
awqi zar

Pure CSS GUI icons (experimental) - Nicolas Gallagher - 7 views

nicolasgallagher.com/pure-css-gui-icons

css icons gui webdesign icon css3 web design

shared by awqi zar on 17 Jan 11 - No Cached
Paul Denten liked it
  • awqi zar on 17 Jan 11
     
    Several months ago I was experimenting with the creation of common GUI icons with CSS. The HTML is very simple and it relies on CSS pseudo-elements rather than extraneous HTML elements. The technical aspects of this exercise might be of interest to others, so I've decided to share it.
Luciano Ferrer

Isotope - jquery magic layouts - responsive - 10 views

isotope.metafizzy.co

isotope jquery layout responsive

shared by Luciano Ferrer on 10 May 11 - No Cached
  • Luciano Ferrer on 23 Oct 11
     
    Isotope: An exquisite jQuery plugin for magical layouts Features Layout modes: Intelligent, dynamic layouts that can't be achieved with CSS alone. Filtering: Hide and reveal item elements easily with jQuery selectors. Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything. Interoperability: features can be utilized together for a cohesive experience. Progressive enhancement: Isotope's animation engine takes advantage of the best browser features when available - CSS transitions and transforms, GPU acceleration - but will also fall back to JavaScript animation for lesser browsers.
Jochen Burkhard

Best Practices for 6 Common User Interface Elements | Webdesigner Depot - 0 views

www.webdesignerdepot.com/...common-user-interface-elements

Best Practices User Interface usability Web Design

shared by Jochen Burkhard on 08 Nov 09 - Cached
  • Jochen Burkhard on 08 Nov 09
     
    The appearance and usability of certain interface elements and functionality are crucial to the success any websites in today's market.
Jochen Burkhard

How to Create CSS3 Paper Curls Without Images - 0 views

blogs.sitepoint.com/pure-css3-paper-curl

sitepoint howto paper curls css3 design

shared by Jochen Burkhard on 27 Apr 11 - No Cached
  • Jochen Burkhard on 27 Apr 11
     
    In my previous posts, we discovered how to create speech bubbles and ribbons without additional HTML elements or images. They were achieved using CSS3 effects applied to the :before and :after pseudo-elements. In this post, we'll use a similar technique to create a paper curl effect.
Phillip Johnson

CSS3 Rounded Corners - 0 views

greenorbwebdesign.co.uk/css3-rounded-corners

css

shared by Phillip Johnson on 16 Jan 15 - No Cached
  • Phillip Johnson on 16 Jan 15
     
    The CSS3 border-radius property allows web developers to easily create rounded corners in their design elements. This property is supported by the major browsers: Firefox, Internet Explorer, Safari, Opera, and Chrome. Using CSS3 you no longer ...
  • Phillip Johnson on 16 Jan 15
     
    The CSS3 border-radius property allows web developers to easily create rounded corners in their design elements. This property is supported by the major browsers: Firefox, Internet Explorer, Safari, Opera, and Chrome. Using CSS3 you no longer ...
  • Phillip Johnson on 16 Jan 15
     
    The CSS3 border-radius property allows web developers to easily create rounded corners in their design elements. This property is supported by the major browsers: Firefox, Internet Explorer, Safari, Opera, and Chrome. Using CSS3 you no longer ...
mikhail-miguel

On having layout - the concept of hasLayout in IE/Win - 0 views

www.satzansatz.de/...onhavinglayout.html

css layouts webdev css

shared by mikhail-miguel on 05 Mar 18 - Cached
  • mikhail-miguel on 05 Mar 18
     
    A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element 'layout'. This leads to a question of why 'hasLayout' can change the rendering of, and the relationships between elements. In this article, the authors focus on some aspects of this complicated matter.
esigners

Psychology Of Color In Web Design - 0 views

www.esigners.in/chology-of-color-in-web-design

digital marketing website web design

shared by esigners on 16 Apr 20 - No Cached
  • esigners on 16 Apr 20
     
    There are so many ways in which color affects website design. First of all, it enhances your brand recognition. Branding is always a major factor when it comes to the business world. Color branding forms a big part of that branding. The term color branding can be simply defined as a process where colors are used to help you build an image for your company. It can also help you influence how people perceive the same. Let us say that a company wants to be known as a trustworthy and dependable enterprise. In that case it can go for options such as grey and blue. Similarly, colors such as black, silver, and gold can be used if a company wants to be seen as luxurious. They can increase your brand recognition With the help of proper usage of colors you can increase your brand recognition by as much as 80%. As you can see, it is a big number indeed. This means that there is also greater pressure on the web developers and designers. They need to be judicious in the way they use color branding on the websites of their clients. They have to make sure that when people land on those websites they know where they are. They should also know the kind of work that their client does. They can make particular elements stand out more than others Let us say that you want certain parts of your website to stand out from the rest. Now, how would you go about it? Definitely, you would not be using the likes of neon lights, which are flashing. You would also not use big arrows, hopefully. The best way to do it would be by using colors. Professionals such as web designers and developers use colors to highlight certain elements such as buttons, subscriptions, and important texts. Usage of color in call-to-action buttons You may be wondering what the right color is for call-to-action buttons. The thing is that there are no definite options as such. Normally, the most prominent colors of choice in this regard are green, red, and orange.
Ahxn Amc

Essential Of A Psychiatry Website Design- Criteria For Getting Leads and Building A Tru... - 0 views

articleneed.com/psychiatry-website-design

psychiatry website design criteria web custom sites mobile friendly articles

shared by Ahxn Amc on 05 Sep 17 - No Cached
  • Ahxn Amc on 05 Sep 17
     
    Today, web design has more power to gain achievement and serve as a decisive authenticity element than the mere content of your website, no matter how deliberate it is. No doubt the content of your site can not be ignored if you are an answerable and honorable specialist, but do not spend all your potential in working on your content display; also make use of much time, energy and some of your capital on the non-ignorable element of how people recognize your website.
mrsrobon555

BuildBox 3 Crack With Activation Code For [MAC & Windows]! - 0 views

clevercracks.com/buildbox-pro-crack

BuildBox 3 Crack Serial Key Activation Code Torrent

shared by mrsrobon555 on 18 Jun 20 - No Cached
  • mrsrobon555 on 18 Jun 20
     
    BuildBox 3 Crack - A brand-new software containing new features for minimizing the codding efforts and building the games with modern technology. BuildBox 3 Crack is providing intuitive interface for the professional with great combination of game creating features and avoid the programming and codings that actually made the work more time-consuming, difficult troubleshooting, hard to detect the errors and problems. Moreover, If you are the game developers than it will give you now drag and drop options to add the elements, texts, graphics, and others things that make the full working games. In this way, your hard coding procedure will avoid and the thousands of time-consuming difficulties will be gone away. So, Just download BuildBox 3 Crack and lets yourself to rest and also do your workout with better in productive. Moreover, It is the lightweight application software with no more system resources usage. The combination of features and easy to use features encourages the users to work more product more. You can also simulate the project live to see what you made and what of changes you made. Finally, It is the great application software for making the medium-sized applications as well as professional games. You will be able to connect the game parts, elements, channels withy no programming scripts.
seo india

A Few Key Elements of a Gaming Website - Justwebdevelopment - 0 views

www.justwebdevelopment.com/...y-elements-of-a-gaming-website

shared by seo india on 13 Jun 22 - No Cached
  • seo india on 13 Jun 22
     
    A Few Key Elements of a Gaming Website - Technology - Justwebdevelopment
rahhulkumar

Why is content the most important element of digital marketing? - 1 views

sixpl.com/...t-element-of-digital-marketing

#online marketing company #internet marketing company #Email marketing company #digital marketing agency #seo #smo #logo design

shared by rahhulkumar on 05 Oct 15 - No Cached
  • rahhulkumar on 05 Oct 15
     
    Content Marketing is a term that is frequently used by digital marketers. Every person involved with digital marketing in some way or the other often talks about content marketing. - See more at: http://sixpl.com/blog/why-is-content-the-most-important-element-of-digital-marketing/#sthash.xujCl9xO.dpuf
websolutions123

Learn Web Development Training: Guide to HTML, CSS, and JavaScript - 0 views

www.webdesign.123coimbatore.com/...ning-courses-in-coimbatore.php

web development course web development training web development training center

shared by websolutions123 on 21 Apr 24 - No Cached
  • websolutions123 on 21 Apr 24
     
    Welcome to our beginner's guide to web development training! In this comprehensive overview, we'll introduce you to the fundamental building blocks of the web: HTML, CSS, and JavaScript. Whether you're looking to start a career in web development or want to create your own website, understanding these core technologies is essential. 1. Understanding HTML (Hypertext Markup Language) HTML is the backbone of any web page. It provides the structure and content of a webpage by using tags to define elements such as headings, paragraphs, images, and links. HTML is a markup language that uses tags to describe different parts of a web page's content. In our web development training, you'll learn: The basic structure of an HTML document How to create headings, paragraphs, and lists Adding images and links Understanding HTML5 semantic elements for better structure and accessibility Are you ready to dive into the exciting world of web development? Let's get started! Learn with our 123tws Web Development Training Center in Coimbatore. visit : https://www.webdesign.123coimbatore.com/training/web-development-courses-in-coimbatore.php
‹ Previous 21 - 40 of 268 Next › Last »
Showing 20▼ items per page