Group items tagged vertical - Web Development, Design & Programming

Electro Pour Mini Dual Vertical, Vertical Slab Midi Gel Electrophoresis - 0 views

www.axivasichem.com/electrophoresis.aspx

Electro Pour Mini Dual Vertical Vertical Slab Midi Gel Electrophoresis

shared by rahulsinghseo on 19 Jan 19 - No Cached

rahulsinghseo on 19 Jan 19

Axiva Sichem Biotech provides electro pour mini dual vertical gel systems and vertical slab midi gel electrophoresis which comes loaded with unique, simple and user-friendly features. We have experienced and skilled vendor team, who help us in offering the best quality products to our clients.

<div class="cArrow"> </div><div class="cContentInner">Axiva Sichem Biotech provides electro pour mini dual vertical gel systems and vertical slab midi gel electrophoresis which comes loaded with unique, simple and user-friendly features. We have experienced and skilled vendor team, who help us in offering the best quality products to our clients. </div>

...

Cancel

Vertical Menu with Show/Hide Effects | Mootools | Ajaxmint.com - 0 views

ajaxmint.com/...with-showhide-effects-mootools

shared by Raja uk on 11 Jan 10 - No Cached

Raja uk on 11 Jan 10

simple tutorial with two vertical menu examples with show/hide menu effect. First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.

<div class="cArrow"> </div><div class="cContentInner">simple tutorial with two vertical menu examples with show/hide menu effect. First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.</div>

...

Cancel

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 | SpyreStudios - 2 views

spyrestudios.com/ng-panel-using-jquery-and-css3

jquery slide panel vertical fixed

shared by Luciano Ferrer on 06 Mar 12 - Cached

Luciano Ferrer on 06 Mar 12

"So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible."

<div class="cArrow"> </div><div class="cContentInner">"So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible."</div>

...

Cancel

The Easiest Way to Create Vertical Text with CSS | Nettuts+ - 0 views

net.tutsplus.com/...-create-vertical-text-with-css

css text design tip webdesign

shared by Jochen Burkhard on 18 Oct 10 - No Cached

Jochen Burkhard on 18 Oct 10

"Earlier this morning, I needed to create vertical text for a project I'm working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we'll go over today! "

<div class="cArrow"> </div><div class="cContentInner">"Earlier this morning, I needed to create vertical text for a project I'm working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we'll go over today! "</div>

...

Cancel
Jochen Burkhard on 18 Oct 10

Sooo short the tip, so useful.

<div class="cArrow"> </div><div class="cContentInner">Sooo short the tip, so useful.</div>

...

Cancel

Vertical Centering Solved by Flexbox - 0 views

philipwalton.github.io/...vertical-centering

vertical alignment CSS flex grid

shared by Nicolas Casel on 31 May 15 - No Cached

6 CSS Tricks to Align Content Vertically - 0 views

www.hongkiat.com/...-tricks-vertical-align-content

vertical alignment css transform flex line-height

shared by Nicolas Casel on 07 Mar 15 - No Cached

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 | SpyreStudios - 1 views

spyrestudios.com/ng-panel-using-jquery-and-css3

panel jquery menu webdesign

shared by Luciano Ferrer on 06 Jun 13 - No Cached

Luciano Ferrer on 06 Jun 13

"More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons. Horizontal sliding panels are great for many situations, but like everything else, they're not always ideal. It depends on the project. To see what I mean by 'horizontal sliding panel', go have a look at my other site Design-Newz, and click on the 'want more' button that's on the right above the navigation bar."

<div class="cArrow"> </div><div class="cContentInner">"More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons. Horizontal sliding panels are great for many situations, but like everything else, they're not always ideal. It depends on the project. To see what I mean by 'horizontal sliding panel', go have a look at my other site Design-Newz, and click on the 'want more' button that's on the right above the navigation bar."</div>

...

Cancel

Circular, Responsive jQuery Carousel - CarouFredSel - 0 views

caroufredsel.dev7studios.com/index.php

jquery carrousel slideshow webdesign

shared by Luciano Ferrer on 07 May 13 - No Cached

Luciano Ferrer on 07 May 13

"jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it's responsive too."

<div class="cArrow"> </div><div class="cContentInner">"jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it's responsive too."</div>

...

Cancel

Elegant Accordion with jQuery and CSS3 | Codrops - 5 views

tympanus.net/...accordion-with-jquery-and-css3

webdesign jquery menu accordion css3

shared by Luciano Ferrer on 09 Nov 11 - Cached

Luciano Ferrer on 09 Nov 11

"Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks."

<div class="cArrow"> </div><div class="cContentInner">"Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks."</div>

...

Cancel

circular, responsive jQuery carousel --- CarouFredSel 5.6.2 - 1 views

caroufredsel.frebsite.nl

javascript jquery carrousel responsive

shared by Luciano Ferrer on 31 Jul 12 - No Cached

Luciano Ferrer on 31 Jul 12

"jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it's responsive too."

<div class="cArrow"> </div><div class="cContentInner">"jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it's responsive too."</div>

...

Cancel

CoolCarousels - Showcasing 37 cool carousel examples - 3 views

coolcarousels.frebsite.nl

webdesign gallery carrousel selection photography

shared by Luciano Ferrer on 05 Mar 12 - No Cached

Luciano Ferrer on 05 Mar 12

"Currently showcasing 37 cool carousels, so go ahead and pick one to view. There are sliders with thumbnails, responsive examples, horizontal/vertical ones, lazy-loading supported sliders for displaying many images and much more."

<div class="cArrow"> </div><div class="cContentInner">"Currently showcasing 37 cool carousels, so go ahead and pick one to view. There are sliders with thumbnails, responsive examples, horizontal/vertical ones, lazy-loading supported sliders for displaying many images and much more."</div>

...

Cancel

Web Application Development and Customization - Pacific Web Technology - 0 views

www.pacificwebtechnology.com/...-development-and-customization

website development web application development

shared by mathew david on 22 Apr 14 - No Cached

mathew david on 22 Apr 14

Our web application development methodology itself is an excellence of technology and we provide the best suitable solution that best serves our partner's needs. We serve the needs of various global verticals with customized solutions that include e-learning,

<div class="cArrow"> </div><div class="cContentInner">Our web application development methodology itself is an excellence of technology and we provide the best suitable solution that best serves our partner's needs. We serve the needs of various global verticals with customized solutions that include e-learning, </div>

...

Cancel

Sexy collapsible login block with jquery slide effect | gausarts.com - 0 views

gausarts.com/...ogin-block-jquery-slide-effect

drupal sexy login block jquery web design

shared by gaus surahman on 18 Jun 09 - Cached

gaus surahman liked it

gaus surahman on 18 Jun 09

We have learned before how to create a slide up toggle with jquery to mimic facebook chat panel where it slides vertically bottom up. Now we are trying to slide a whole login block horizontally.

<div class="cArrow"> </div><div class="cContentInner">We have learned before how to create a slide up toggle with jquery to mimic facebook chat panel where it slides vertically bottom up. Now we are trying to slide a whole login block horizontally.</div>

...

Cancel

jAni - Animate background images | Ajaxmint.com - 0 views

ajaxmint.com/...jani-animate-background-images

shared by Raja uk on 05 Jan 10 - No Cached

Raja uk on 05 Jan 10

jAni is a simple plugin for jQuery which allows you animate background images. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you good control of the animation.

<div class="cArrow"> </div><div class="cContentInner">jAni is a simple plugin for jQuery which allows you animate background images. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you good control of the animation.</div>

...

Cancel

The Incredible Em & Elastic Layouts with CSS - 0 views

jontangerine.com/...m-and-elastic-layouts-with-css

blog css tools webdesign typography design fonts text layout web framework layouts em elastic

shared by Soul Book on 01 Apr 10 - Cached

Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means: They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
...

Cancel
All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
...

Cancel
The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!
...

Cancel
...9 more annotations...
However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave: html{ font-size:100%; }
...

Cancel
Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }
...

Cancel
1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)
...

Cancel
While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
...

Cancel
Set a 12px font size with 18px line height and margin for paragraphs
...

Cancel
Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
...

Cancel
To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }
...

Cancel
Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one: See an example here. (Would have posted the code put it was coming out really ugly!) I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
...

Cancel
Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
...

Cancel

Soul Book on 01 Apr 10

A nice and simple explanation of using EMs to make elastic layouts

<div class="cArrow"> </div><div class="cContentInner">A nice and simple explanation of using EMs to make elastic layouts</div>

...

Cancel

25 Examples of Interesting and Beautiful Navigation | Codrops - 0 views

tympanus.net/...sting-and-beautiful-navigation

inspiration showcase navigation

shared by Alexis Sgavel on 13 Mar 11 - No Cached

Alexis Sgavel on 13 Mar 11

Designing the perfect navigation for a website it's one of the main keys to have a good outcome, to have a website that gets users attentions and make them want to browse around to check every little information (tab, image, text, etc) you have there. Navigation menus, schemes, layouts, everything has an important weight and need to be carefully analyzed to form a nice layout. From horizontal sliders to vertical scrolls and menu based navigations, here you will see 25 examples of navigations that will certainly get you inspired.

<div class="cArrow"> </div><div class="cContentInner">Designing the perfect navigation for a website it's one of the main keys to have a good outcome, to have a website that gets users attentions and make them want to browse around to check every little information (tab, image, text, etc) you have there. Navigation menus, schemes, layouts, everything has an important weight and need to be carefully analyzed to form a nice layout. From horizontal sliders to vertical scrolls and menu based navigations, here you will see 25 examples of navigations that will certainly get you inspired.</div>

...

Cancel

How Multi-Store Ecommerce can Help You Develop Your Online Business - 0 views

www.ydeveloper.com/...u-develop-your-online-business

ecommerce online business business

shared by Aksay Vys on 04 Dec 14 - No Cached

Aksay Vys on 04 Dec 14

Multiple stores help ecommerce business owners in the following ways: Sell products from diverse verticals - categories on the same pages may not always be possible since categories themselves could.

<div class="cArrow"> </div><div class="cContentInner">Multiple stores help ecommerce business owners in the following ways: Sell products from diverse verticals - categories on the same pages may not always be possible since categories themselves could.</div>

...

Cancel

Alexander Wang - Fashion Website | Abduzeedo Design Inspiration - 0 views

abduzeedo.com/alexander-wang-fashion-website

alexander wang fashion website design inspiration

shared by ukulelemononoke on 29 Dec 15 - No Cached

ukulelemononoke on 29 Dec 15

Josué Solano took his spare time to redesign the fashion designer Alexander Wang's website. The concept has beautiful ideas that are becoming quite trendy, the vertical orientation for text being a great example. Another thing that is a good reference, in my opinion, is the grid system and the way the content is showcased. It doesn't follow a regular order but more organic, much more like a magazine layout.

<div class="cArrow"> </div><div class="cContentInner">Josué Solano took his spare time to redesign the fashion designer Alexander Wang's website. The concept has beautiful ideas that are becoming quite trendy, the vertical orientation for text being a great example. Another thing that is a good reference, in my opinion, is the grid system and the way the content is showcased. It doesn't follow a regular order but more organic, much more like a magazine layout.</div>

...

Cancel

Hire Magento Developer India - AResourcePool - 0 views

websiteandmobileappdevelopmentcompany.blogspot.com/...agento-developer-in-india.html

Magento Development Company India Hire Magento Developer India Magneto Developer India mobile and web development companywebsite and mobile app development company website and mobile app development company hire Magento developer

shared by AResource Pool on 02 Aug 18 - No Cached

AResource Pool on 02 Aug 18

Aresourcepool is a leading mobile and web development company. We have delivered over 1000 global projects across diver's verticals. In Combined More than 6000+ project delivered including domains such as Magento web development, mobile/tablet apps and games. Magento Development Company India, Hire Magento Developer India, Magneto Developer India, mobile and web development company, website and mobile app development company, hire Magento developer, web development company USA

<div class="cArrow"> </div><div class="cContentInner">Aresourcepool is a leading mobile and web development company. We have delivered over 1000 global projects across diver's verticals. In Combined More than 6000+ project delivered including domains such as Magento web development, mobile/tablet apps and games. Magento Development Company India, Hire Magento Developer India, Magneto Developer India, mobile and web development company, website and mobile app development company, hire Magento developer, web development company USA </div>

...

Cancel

14 Free Vertical CSS Menus - 0 views

www.exploding-boy.com/...14-free-vertical-css-menus

css

shared by mikhail-miguel on 05 Mar 18 - No Cached

Group items tagged