mqxu

加载动画

A Pen by 陶然然 on CodePen.

License.

mqxu

CSS Grid Layout with grid-template-columns: repeat();

Using the repeat shortcut instead of declaring the same value multiple times when declaring grid-template-* rows or columns.

A Pen by Stacy on CodePen.

License.

mqxu

<div id="columns">
  <figure>
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
	<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
	</figure>
	
	<figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
	<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
	</figure>

mqxu

<section class="section">
	<h1>Kanban Drag and Drop Interface Layout</h1>
	<h4>Inspired by <a href="https://trello.com/
    ">Trello</a>, and <a href="https://www.google.com/keep/">Google Keep</a>, <a href="http://blog.invisionapp.com/design-project-management-tool/">Invision</a> and <a href="https://twitter.com/aaronstump">@aaronstump</a></h4>
</section>

<div class="drag-container">
	<ul class="drag-list">
		<li class="drag-column drag-column-on-hold">
			<span class="drag-column-header">

mqxu

<div class="main">
  <h1>Responsive Card Grid Layout</h1>
  <ul class="cards">
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://picsum.photos/500/300/?image=10"></div>
        <div class="card_content">
          <h2 class="card_title">Card Grid Layout</h2>
          <p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
          <button class="btn card_btn">Read More</button>

mqxu

<h1>Pure CSS Accordion <sup>2.0</sup></h1>
<div class="row">
  <div class="col">
    <h2>Open <b>multiple</b></h2>
    <div class="tabs">
      <div class="tab">
        <input type="checkbox" id="chck1">
        <label class="tab-label" for="chck1">Item 1</label>
        <div class="tab-content">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!

mqxu

3 Column Responsive Layout

At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.

A Pen by Graham Clark on CodePen.

License.

mqxu

<div class="container">
	<div class="tabs">
		<input type="radio" id="radio-1" name="tabs" checked />
		<label class="tab" for="radio-1">Upcoming<span class="notification">2</span></label>
		<input type="radio" id="radio-2" name="tabs" />
		<label class="tab" for="radio-2">Development</label>
		<input type="radio" id="radio-3" name="tabs" />
		<label class="tab" for="radio-3">Completed</label>
		<span class="glider"></span>
	</div>

mqxu

Daily UI #13 | jQuery Datepicker summer vibe

Simple styling of the jQuery UI Datepicker.

Image credit to: https://dribbble.com/PatrykW

A Pen by Håvard Brynjulfsen on CodePen.

mqxu

File upload

Design by Paul van Oijen on Dribbble: https://dribbble.com/shots/3838821-Modals/attachments/869282

A Pen by Håvard Brynjulfsen on CodePen.

License.