JSDM

HTML

 
1
<section class="newsletter">
2
  <h3 class="newsletter-header">Sign up to our newsletter below.</h3>
3
  <form class="newsletter-form">
4
    <fieldset>
5
      <input type="email" class="newsletter-email" placeholder="you@me.com">
6
      <button type="submit" class="newsletter-submit"><span>Go</span></button>
7
    </fieldset>
8
    <fieldset>
9
      <input type="checkbox" class="newsletter-checkbox" id="newsletter-offers" name="newsletter-offers" checked>
10
    
11
      <label class="newsletter-label" for="newsletter-offers">
12
        Notify me with special offers
13
        <figure class="newsletter-check">
14
          <svg class="checkmark" width="56" height="56">
15
            <path d="m25,36 l14,-16"
16
              style="stroke-dasharray: 27px;"></path>
17
            <path d="m25,36 l-8,-9"
18
              style="stroke-dasharray: 11px;"></path>
19
          </svg>
20
          <svg class="cross" width="56" height="56">
21
            <path d="m28,28 l-8,-8"
22
                style="stroke-dasharray: 13px;"></path>
23
            <path d="m28,28 l8,8"
24
                style="stroke-dasharray: 13px;"></path>
25
            <path d="m28,28 l-8,8"
26
                style="stroke-dasharray: 13px;"></path>
27
            <path d="m28,28 l8,-8"
28
                style="stroke-dasharray: 13px;"></path>
29
          </svg>
30
        </figure>
31
      </label>
32
    </fieldset>
33
  </form>
34
</section>
!

CSS

​x
 
1
/* Mixins */
2
@mixin linear-gradient( $start: #f1f1f1, $from: 0%, $stop: #d9d9d9, $to: 100% ) {
3
background: $start;
4
background: linear-gradient(to bottom, $start $from,$stop $to);
5
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($stop)}',GradientType=0 );
6
}
7
​
8
@mixin shadows($text: false, $top: #000000, $bottom: #ffffff, $weight: 1px, $blur: 0px) {
9
  @if $text == true {
10
    text-shadow: 0 -1px $blur rgba($top, .3), 0 $weight $blur rgba($bottom, .2);
11
  }
12
  @else {
13
    box-shadow: inset 0 $weight $blur rgba($top, .1), 0 $weight $blur rgba($bottom, .2);
14
  }
15
}
16
​
17
/* Colors */
18
$white:       #ffffff;
19
$offwhite:    #e9e9e9;
20
$lightgreen:  #99c740;
21
$darkgreen:   #7ba132;
22
$radius:      50px;
23
​
24
body {
25
  background: $lightgreen;
26
  margin-bottom: 5em;
27
  font-weight: 700;
28
  letter-spacing: -1px;
29
}
30
​
31
.newsletter {
32
  max-width: 500px;
33
  margin: 0 auto;
34
}
35
.newsletter-header {
36
  margin-top: 3em;
37
  margin-bottom: 4em;
38
  color: $white;
39
  font-size: 2.1em;
40
  text-align: center;
41
  text-shadow: 0 2px 0 $darkgreen;
42
}
43
.newsletter-email {
44
  background: $darkgreen;
45
  border: none;
46
  border-radius: $radius;
47
  padding: .65em 4em .65em 1em;
48
  width: 100%;
49
  color: $white;
50
  font-size: 2em;
51
  letter-spacing: -1px;
52
53
  @include shadows($weight: 2px);
54
55
  transition: background .2s;
56
57
  &:hover,
58
  &:focus {
59
    background: lighten($darkgreen, 2%);
60
  }
61
}
62
.newsletter-submit {
63
  position: absolute;
64
  top: 3px; right: 3px;
65
  height: calc(100% - 6px);
66
  padding: 1.15em 1.35em;
67
68
  border: 0;
69
  border-radius: $radius;
70
  color: $darkgreen;
71
  font-size: 1.5em;
72
  line-height: .5;
73
74
  box-shadow: 0 5px 20px rgba(0,0,0, .3);
75
76
  @include linear-gradient($white, 0%, $offwhite, 100%);
77
78
  span {
79
    padding: .1em .65em;
80
    border-radius: $radius;
81
    @include linear-gradient($offwhite, 0%, $white, 100%);
82
  }
83
}
84
​
85
.newsletter-checkbox {display:none;}
86
​
87
.newsletter-label {
88
  @include shadows($text: true, $weight: 2px);
89
  display: block;
90
  margin-top: 3em;
91
  position: relative;
92
93
  cursor: pointer;
94
  color: $darkgreen;
95
  font-size: 1.5em;
96
97
  svg {
98
    position: absolute;
99
    top: 3px;
100
    opacity: 0;
101
    transition: all .2s;
102
  
103
    &.checkmark {
104
      left: 0;
105
      opacity: 0;
106
    }
107
    &.cross {
108
      right: 0;
109
      opacity: 1;
110
    }
111
  }
112
113
  path {
114
    stroke: #fff;
115
    stroke-linecap: round;
116
    stroke-width: 4;
117
    -webkit-transition: opacity 0.1s;
118
    transition: opacity 0.1s;
119
    fill: none;
120
    -webkit-transition: stroke-dashoffset 0.2s;
121
    transition: stroke-dashoffset 0.2s;
122
  }
123
}
124
​
125
.newsletter-check {
126
  position: absolute;
127
  top: -.5em;
128
  right: 0;
129
  margin: 0;
130
  padding: 1em;
131
  width: 4.75em;
132
  height: 2.5em;
133
134
  -webkit-appearance: none;
135
  appearance: none;
136
  background: $darkgreen;
137
  border-radius: $radius;
138
  outline: none;
139
  cursor: pointer;
140
141
  transition: transform .2s, background .3s;
142
143
  @include shadows($weight: 2px);
144
145
  &:before,
146
  &:after {
147
    content: '';
148
    position: absolute;
149
    transition: all .2s;
150
  }
151
  &:before {
152
    height: calc(100% - 6px);
153
    width: 2.3em;
154
    top: 3px; left: 3px;
155
    border-radius: 50%;
156
    box-shadow: 0 5px 20px rgba(0,0,0, .3);
157
  
158
    @include linear-gradient($white, 0%, $offwhite, 80%);
159
  }
160
  &:after {
161
    top: calc(50% - .4em);
162
    left: calc(1.1em - 6px);
163
    height: .8em;
164
    width: .8em;
165
  
166
    border-radius: 50%;
167
​
168
    @include linear-gradient($offwhite, 30%, $white, 100%);
169
  }
170
}
171
​
172
.newsletter-checkbox:checked + label {
173
  .checkmark { opacity: 1; }
174
  .cross { opacity: 0; }
175
}
176
.newsletter-checkbox:checked + label .newsletter-check:before {
177
  transform: translateX( calc(100% - 2px) );
178
}
179
.newsletter-checkbox:checked + label .newsletter-check:after {
180
  transform: translateX( calc(100% + (1.1em + 8px)) );
181
}
182
​
183
​
184
/* Extras */
185
*, *:before, *:after {
186
  -webkit-font-smoothing: antialiased;
187
  text-rendering: optimizeLegibility;
188
  -webkit-box-sizing: border-box;
189
     -moz-box-sizing: border-box;
190
          box-sizing: border-box;
191
}
192
fieldset {
193
  border: 0;
194
  padding: 0;
195
  position: relative;
196
  width: 100%;
197
}
198
​
199
input:focus {
200
  outline: none;
201
}
202
​
203
::-webkit-input-placeholder {
204
  color: $white;
205
}
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
​
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................